一文掌握vue3.2setup语法糖

前言

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

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

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

一、如何使用setup语法糖

只需在 script 标签上写上setup

代码如下（示例）：

二、data数据的使用

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

代码如下（示例）：

三、method方法的使用

代码如下（示例）：

四、watchEffect的使用

代码如下（示例）：

五、watch的使用

代码如下（示例）：

六、computed计算属性的使用

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

代码如下（示例）：

七、props父子传值的使用

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

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

八、emit子父传值的使用

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

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

九、获取子组件ref变量和defineExpose暴露

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

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

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

十、路由useRoute和useRouter的使用

代码如下（示例）：

十一、store仓库的使用

代码如下（示例）：

十二、await的支持

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

代码如下（示例）：

十三、provide 和 inject 祖孙传值

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

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

网站名称：一文掌握vue3.2setup语法糖
文章分享：http://www.shufengxianlan.com/qtweb/news44/452094.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联