Vue3.2设置语法糖总结

Vue3.2设置语法糖总结前言提示：Vue3.2版本只能使用语法糖！在Vue3.0中，变量必须返回后才能在模板中使用；而在Vue3.2中，只需要在script标签中添加setup属性，模板就可以直接使用，不需要return，非常的爽！提示：以下为本文正文内容。以下案例供参考。1.setup语法糖的使用方法将setup代码写在script标签上如下（示例）：二、数据data的使用由于setup不需要写return，所以直接声明data即可。代码如下（示例）：3.方法代码如下（示例）：4、使用watchEffect的代码如下（示例）：6.computed计算属性的使用computed计算属性的写法有两种（考虑读写的简写和全写）。代码如下（示例）：七、使用props父子值传递子组件代码如下（示例）：父组件代码如下（示例）：8、emitchild-parent传值子组件的使用代码如下（示例）：父组件代码如下（示例）：9.获取子组件引用变量e和defineExpose暴露，即在vue2中获取子组件的ref，在父组件中直接控制子组件方法和变量方法子组件代码如下（示例）：父组件代码如下（示例):十、路由useRoute和useRouter使用代码如下（示例）：11、使用store仓库代码如下（示例）：12.await支持setup在语法糖中，await可以直接使用，不用写async，setup会自动变成async设置代码如下（示例）：十三、提供并注入祖父母值父组件代码如下（示例）：ref('Jerry')//使用provideprovide('provideState',{name,changeName:()=>{name.value='LittleBell'}})子组件代码如下（示例）：<scriptsetup>import{inject}from'vue'constprovideState=inject('provideState')provideState.changeName()总结提示：这里是文章的总结：例如：以上是我正在找博客学习setup的语法糖的总结如果在项目中使用是可以实现的。如果我有错误或我的方法使用不正确，请告诉我，我会立即更改！如果你觉得我写的文章可以很实用，欢迎你点赞、收藏、关注！关注博主，不迷路！不忙的时候会继续更新的！欢迎大家阅读小叮当的其他文章~