蓝狮注册一文掌握 vue3.2 setup 语法糖

前言
提示: 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和us eRouter的使用
代码如下(示例):

十一、store仓库的使用
代码如下(示例):

十二、await的支持
setup 语法糖中可直接使用 await ,不需要写 async , setup 会自动变成 async setup

代码如下(示例):

十三、provide 和 inject 祖孙传值
父组件代码如下(示例):

子组件代码如下(示例):

作者: 玲小叮当

  • EOF –
0 Comments
Leave a Reply