vue3.2 setup 语法糖常用简介

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

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

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

只需在 script 标签上写上setup
代码如下(示例):






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

代码如下(示例):


代码如下(示例):



代码如下(示例):


代码如下(示例):


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

代码如下(示例):


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




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



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



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


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

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




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




代码如下(示例):


代码如下(示例):


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

代码如下(示例):


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




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

你可能感兴趣的:(vue3.2 setup 语法糖常用简介)