vue3.2 setup 语法糖常用简介

congcong • • 杂文

提示：Vue3.2 版本开始才能使用语法糖！

在 Vue3.0 中变量必须 return 出来，template中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return，template 便可直接使用，非常的香啊！

提示：以下是本篇文章正文内容，下面案例可供参考

/color{green} {一、如何使用setup语法糖}

只需在 script 标签上写上setup
代码如下（示例）：

/color{green} {二、data数据的使用}

由于 setup 不需写 return，所以直接声明数据即可

代码如下（示例）：

/color{green} {三、method方法的使用}

代码如下（示例）：

/color{green} {四、watchEffect的使用}

代码如下（示例）：

/color{green} {五、watch的使用}

代码如下（示例）：

/color{green} {六、computed计算属性的使用}

computed计算属性有两种写法(简写和考虑读写的完整写法)

代码如下（示例）：

/color{green} {七、props父子传值的使用}

子组件代码如下（示例）：




父组件代码如下（示例）：

/color{green} {八、emit子父传值的使用}

子组件代码如下（示例）：



父组件代码如下（示例）：

/color{green} {九、获取子组件ref变量和defineExpose暴露}

即vue2中的获取子组件的ref，直接在父组件中控制子组件方法和变量的方法

子组件代码如下（示例）：




父组件代码如下（示例）：

/color{green} {十、路由useRoute和useRouter的使用}

代码如下（示例）：

/color{green} {十一、store仓库的使用}

代码如下（示例）：

/color{green} {十二、await的支持}

setup 语法糖中可直接使用 await，不需要写 async ， setup 会自动变成 async setup

代码如下（示例）：

/color{green} {十三、provide 和 inject 祖孙传值}

父组件代码如下（示例）：




子组件代码如下（示例）：

版权声明：
作者：congcong
链接：https://www.techfm.club/p/53783.html
来源：TechFM
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>