您现在的位置是：网站首页> 编程资料编程资料
vue3+ts实际开发中该如何优雅书写vue3语法_vue.js_
2023-05-24
393人已围观
简介 vue3+ts实际开发中该如何优雅书写vue3语法_vue.js_
vue3语法的发展
- Vue3 在早期版本（ 3.0.0-beta.21 之前）中对 composition api 的支持，只能在组件选项 setup 函数中使用。
- 在 3.0.0-beta.21 版本中增加了
编译器宏
编译器宏（compiler macros） 有：defineProps、defineEmits、withDefaults、defineExpose 等。
编译器宏只能在
// home.vue 页面 .mainBg componentA(:name="name",:age="age", :list="list")
这边给它定义默认值之后保存 看页面发现还是没有把默认值展示出来
这是因为我们在home页面给name和age用ref赋值的时候给了 ‘ ’ 所以他把空当成了默认值就没有展示withDefaults里面给的默认值 这时候我们把name和age写成
let name = ref() const age = ref()
还有一种情况 当不给props定义默认值的时候 传参也是为空时
defineEmits
一样的，在
// 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语法内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
相关内容
- vue3子组件如何修改父组件传过来的props数据_vue.js_
- JS Generator函数yield表达式示例详解_javascript技巧_
- Angular 的 Change Detection机制实现详解_AngularJS_
- ECharts实现数据超出Y轴最大值max但不隐藏_javascript技巧_
- React Fiber 链表操作及原理示例详解_React_
- TS报错:Parameter 'xxx' implicitly has an 'any' type的解决方式_javascript技巧_
- 如何使用Vue3+Vite+TS快速搭建一套实用的脚手架_vue.js_
- React前端解链表数据结构示例详解_React_
- TypeScript中type和interface的区别及注意事项_javascript技巧_
- Vue3自动引入组件与组件库的方法实例_vue.js_
