vue3拒绝return 使用set up 语法糖，感受翻倍的效率！

_苏尘
993 阅读1分钟
  1. 【起初】变量必须要return出来，才能再template展示
  2. Vue3.2只需在script上加【setup】属性，代码再编译的时候就是运行在setup中，不需要return,template可以直接使用

     ------ 👇👇👇 推荐vue3 vsCode 插件 👇👇👇 ------

image.png

文件结构

image.png

一、data

image.png

image.png

二、method

image.png

三、computed

image.png

四、watch

image.png

五、组件传值

1、props 父 传 子

父组件

image.png

子组件

image.png

.eslintrc.js配置

image.png

2、emit 子 传 父

父组件

image.png

子组件

image.png

六、v-model

父组件

image.png

子组件

image.png

七、nextTick

image.png

八、ref、defineExpose

  • 在标准组件写法里，子组件的数据都是默认隐式暴露给父组件的，但在 script-setup 模式下，所有数据只是默认 return 给 template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。
  • 如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，这个操作，就是由 defineExpose 来完成。

父组件

image.png

子组件

image.png

九、插槽slot

父组件

image.png

子组件

image.png

十、路由useRoute、useRouter

image.png

十一、路由导航首位

image.png

十二、生命周期

image.png

十三、css变量注入

image.png

十四、挂载vue实例和组件运用

组件内使用

image.png main.js挂载

image.png

十五、定义组件名字

image.png

十六、完结

好啦，基本的语法糖的知识，都已经包括在内了，如果你看完这篇文章觉着对你有帮助的话，就点个赞吧！你的赞就是我最大的动力！如果有想一起学习积极向上的小伙伴可以私聊我，我们一起学习！

avatar
文章
阅读
粉丝