vue3语法的发展
- Vue3 在早期版本( 3.0.0-beta.21 之前)中对 composition api 的支持,只能在组件选项 setup 函数中使用。
- 在 3.0.0-beta.21 版本中增加了
编译器宏(compiler macros) 有:defineProps、defineEmits、withDefaults、defineExpose 等。
编译器宏只能在 块中使用,不需要被导入,并且会在处理
块时被一同编译掉。
编译器宏必须在 的顶层使用,不可以在
的局部变量中引用
在 块中是没有组件配置项的,也就是说是没有 props 选项,需要使用 defineProps 来声明 props 相关信息。defineProps 接收的对象和组件选项 props 的值一样。
我这边引用了pug 如果需要安装一下就可以直接使用
好处可以减少代码量 层次也清楚
npm install pug
// componentA.vue 组件 div div {{`我的名字是${name},今年${age}`}} div(v-for="item in list",:key="item.name") {{`我的名字是${item.name},今年${item.age}`}}
// home.vue 页面 .mainBg componentA(:name="name",:age="age", :list="list")
这边给它定义默认值之后保存 看页面发现还是没有把默认值展示出来
这是因为我们在home页面给name和age用ref赋值的时候给了 ‘ ’ 所以他把空当成了默认值就没有展示withDefaults里面给的默认值 这时候我们把name和age写成
let name = ref() const age = ref()
还有一种情况 当不给props定义默认值的时候 传参也是为空时
一样的,在 块中也是没有组件配置项 emits 的,需要使用 defineEmits 编译器宏声明 emits 相关信息。
// componentA.vue 组件 div div {{`我的名字是${name},今年${age}`}} //- div(v-for="item in list",:key="item.name") {{`我的名字是${item.name},今年${item.age}`}} el-button(type="primary",@click="setName") 向父组件发送 name el-button(type="primary",@click="setAge") 向父组件发送 age
// home.vue .mainBg componentA(:name="name",:age="age", :list="list", @changeName="changeName",@changeAge="changeAge")
.mainBg el-button(type="primary",@click="handleChangeMsg") 组件B componentB(ref="root")
如果把defineExpose注释掉
由于没有把这个方法暴露出来 导致找不到这个方法 changeMsg is not a function
到此这篇关于vue3+ts实际开发中该如何优雅书写vue3语法的文章就介绍到这了,更多相关vue3+ts 书写vue3语法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!