Vue3 总结篇

最新推荐文章于 2024-09-03 09:18:21 发布

lemon丶csdn

最新推荐文章于 2024-09-03 09:18:21 发布

阅读量542

点赞数

分类专栏： vue3 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_43806604/article/details/127682328

版权

本文是关于Vue3的总结，涵盖了Props的定义与默认值处理，Emit的使用变化，expose与defineExpose用于模板引用和直接访问DOM，以及provide和inject解决多级组件通信问题。文章详细解释了Vue3中这些特性的用法和优势。

摘要由CSDN通过智能技术生成

Vue3 TypeScript Setup

近一年来写vue3的总结篇，包括props，父子组件通信，emit，expose等等相关总结。

Props && defineProps && withDefaults

当使用基本的defineProps的时候，其声明类型如下

interface Props {
   
    name: string
    age?: number
}
defineProps<Props>({
   /** ... */})
// or
defineProps<{
     /** ... */}>({
   /** ... */})

如果按照这样的写法，我们就失去了声明默认值的能力，这时候就需要通过编译器宏来解决 -> withDefaults

interface Props {
   
    name: string
    age?: number
}
const props = withDefaults(defineProps<Props>(), {
   
    name: 张三,
    age: 18
})
// or
const props = withDefaults(defineProps<{
     
/** ... */
}>(), {
   
    name: 张三,
    age: 18
})