vue3+ts实际开发中该如何优雅书写vue3语法

vue3语法的发展

  1. Vue3 在早期版本( 3.0.0-beta.21 之前)中对 composition api 的支持,只能在组件选项 setup 函数中使用。
  2. 在 3.0.0-beta.21 版本中增加了

编译器宏

编译器宏(compiler macros) 有:defineProps、defineEmits、withDefaults、defineExpose 等。

编译器宏只能在

// home.vue 页面



vue3+ts实际开发中该如何优雅书写vue3语法_第2张图片

这边给它定义默认值之后保存 看页面发现还是没有把默认值展示出来

这是因为我们在home页面给name和age用ref赋值的时候给了 ‘ ’ 所以他把空当成了默认值就没有展示withDefaults里面给的默认值 这时候我们把name和age写成
let name = ref() const age = ref()

vue3+ts实际开发中该如何优雅书写vue3语法_第3张图片

还有一种情况 当不给props定义默认值的时候 传参也是为空时

vue3+ts实际开发中该如何优雅书写vue3语法_第4张图片

vue3+ts实际开发中该如何优雅书写vue3语法_第5张图片

vue3+ts实际开发中该如何优雅书写vue3语法_第6张图片

defineEmits

一样的,在

// home.vue









vue3+ts实际开发中该如何优雅书写vue3语法_第8张图片

vue3+ts实际开发中该如何优雅书写vue3语法_第9张图片

如果把defineExpose注释掉

vue3+ts实际开发中该如何优雅书写vue3语法_第10张图片

vue3+ts实际开发中该如何优雅书写vue3语法_第11张图片

由于没有把这个方法暴露出来 导致找不到这个方法 changeMsg is not a function

总结

到此这篇关于vue3+ts实际开发中该如何优雅书写vue3语法的文章就介绍到这了,更多相关vue3+ts 书写vue3语法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(vue3+ts实际开发中该如何优雅书写vue3语法)