Vue3 组件之间的通信
组件之间的通信
经过前面几章的阅读，相信开发者已经可以搭建一个基础的 Vue 3 项目了！
但实际业务开发过程中，还会遇到一些组件之间的通信问题，父子组件通信、兄弟组件通信、爷孙组件通信，还有一些全局通信的场景。
TIP这一章节的内容，Vue 3 对比 Vue 2 的变化都比较大！
这一章就按使用场景来划分对应的章节吧，在什么场景下遇到问题，也方便快速找到对应的处理办法。
父子组件通信
爷孙组件通信
兄弟组件通信
全局组件通信
父子组件通信
父子组件通信是指，B 组件引入到 A 组件里渲染，此时 A 是 B 的父级；B 组件的一些数据需要从 A 组件拿，B 组件有时也要告知 A 组件一些数据变化情况。
他们之间的关系如下， Child.vue 是直接挂载在 Father.vue 下面：
# 父组件
Father.vue
│ # 子组件
└─Child.vue
常用的方法有：
为了方便阅读，下面的父组件统一叫 Father.vue ，子组件统一叫 Child.vue 。
WARNING在 Vue 2 ，有的开发者可能喜欢用 $attrs / $listeners 来进行通信，但该方案在 Vue 3 已经移除了，详见 移除 $listeners 。
props / emits
这是 Vue 跨组件通信最常用，也是基础的一个方案，它的通信过程是：
1.父组件 Father.vue 通过 props 向子组件 Child.vue 传值
2.子组件 Child.vue 则可以通过 emits 向父组件 Father.vue 发起事件通知
最常见的场景就是统一在父组件发起 AJAX 请求，拿到数据后，再根据子组件的渲染需要传递不同的 props 给不同的子组件使用。
下发 props
注：这一小节的步骤是在 Father.vue 里操作。
下发的过程是在 Father.vue 里完成的，父组件在向子组件下发 props 之前，需要导入子组件并启用它作为自身的模板，然后在 setup 里处理好数据并 return 给 用。
在 Father.vue 的 script /> 里：
// Father.vue
import { defineComponent } from 'vue'
import Child from '@cp/Child.vue'interface Member {id: numbername: string
}export default defineComponent({// 需要启用子组件作为模板components: {Child,},// 定义一些数据并 `return` 给 `` 用setup() {const userInfo: Member = {id: 1,name: 'Petter',}// 不要忘记 `return` ，否则 `` 拿不到数据return {userInfo,}},
})然后在 Father.vue 的 template /> 这边拿到 return 出来的数据，把要传递的数据通过属性的方式绑定在组件标签上。
这样就完成了 props 数据的下发。
在 template /> 绑定属性这里，如果是普通的字符串，比如上面的 title，则直接给属性名赋值就可以。
如果是变量名，或者其他类型如 number 、 boolean 等，比如上面的 index，则需要通过属性动态绑定的方式来添加，使用 v-bind: 或者 : 符号进行绑定。
另外官方文档推荐对 camelCase 风格（小驼峰）命名的 props ，在绑定时使用和 HTML attribute 一样的 kebab-case 风格（短横线），例如使用 user-name 代替 userName 传递，详见官网的 传递 prop 的细节 一节。
接收 props
注：这一小节的步骤是在 Child.vue 里操作。
接收的过程是在 Child.vue 里完成的，在 script /> 部分，子组件通过与 setup 同级的 props 来接收数据。
它可以是一个 string[] 数组，把要接受的变量名放到这个数组里，直接放进来作为数组的 item ：
// Child.vue
export default defineComponent({props: ['title', 'index', 'userName', 'uid'],
})但这种情况下，使用者不知道这些属性的使用限制，例如是什么类型的值、是否必传等等。
带有类型限制的 props
注：这一小节的步骤是在 Child.vue 里操作。
和 TypeScript 一样，类型限制可以为程序带来更好的健壮性， Vue 的 props 也支持增加类型限制。
相对于传递一个 string[] 类型的数组，更推荐的方式是把 props 定义为一个对象，以对象形式列出，每个 Property 的名称和值分别是各自的名称和类型，只有合法的类型才允许传入。
TIP注意，和 TS 的类型定义不同， props 这里的类型，首字母需要大写，也就是 JavaScript 的基本类型。
支持的类型有：
了解了基本的类型限制用法之后，接下来给 props 加上类型限制：
// Child.vue
export default defineComponent({props: {title: String,index: Number,userName: String,uid: Number,},
})现在如果传入不正确的类型，程序就会抛出警告信息，告知开发者必须正确传值。
如果需要对某个 Prop 允许多类型，比如这个 uid 字段，可能是数值，也可能是字符串，那么可以在类型这里，使用一个数组，把允许的类型都加进去。
// Child.vue
export default defineComponent({props: {// 单类型title: String,index: Number,userName: String,// 这里使用了多种类型uid: [Number, String],},
})可选以及带有默认值的 props
注：这一小节的步骤是在 Child.vue 里操作。
所有 props 默认都是可选的，如果不传递具体的值，则默认值都是 undefined ，可能引起程序运行崩溃， Vue 支持对可选的 props 设置默认值，也是通过对象的形式配置 props 的选项。
其中支持配置的选项有：
了解了配置选项后，接下来再对 props 进行改造，将其中部分选项设置为可选，并提供默认值：
// Child.vue
export default defineComponent({props: {// 可选，并提供默认值title: {type: String,required: false,default: '默认标题',},// 默认可选，单类型index: Number,// 添加一些自定义校验userName: {type: String,// 在这里校验用户名必须至少 3 个字validator: (v) => v.length >= 3,},// 默认可选，但允许多种类型uid: [Number, String],},
})使用 props
注：这一小节的步骤是在 Child.vue 里操作。
在 template /> 部分， Vue 3 的使用方法和 Vue 2 是一样的，比如要渲染父组件传入的 props ：
标题：{{ title }}
索引：{{ index }}
用户id：{{ uid }}
用户名：{{ userName }}
但是 script /> 部分，变化非常大！
在 Vue 2 里，只需要通过 this.uid 、 this.userName 就可以使用父组件传下来的 Prop ，但是 Vue 3 没有了 this ，所以是通过 setup 的入参进行操作。
// Child.vue
export default defineComponent({props: {title: String,index: Number,userName: String,uid: Number,},// 在这里需要添加一个入参setup(props) {// 该入参包含了当前组件定义的所有 propsconsole.log(props)},
})关于 Setup 函数的第一个入参 props ：
1.该入参包含了当前组件定义的所有 props （如果父组件 Father.vue 传进来的数据在 Child.vue 里未定义，不仅不会拿到，并且在控制台会有警告信息）。
2.该入参可以随意命名，比如可以写成一个下划线 _ ，通过 _.uid 也可以拿到数据，但是语义化命名是一个良好的编程习惯。
3.该入参具备响应性，父组件修改了传递下来的值，子组件也会同步得到更新，因此请不要直接解构，可以通过 toRef 或 toRefs API 转换为响应式变量
传递非 props 的属性
上一小节最后有一句提示是：
如果父组件 Father.vue 传进来的数据在 Child.vue 里未定义，不仅不会拿到，并且在控制台会有警告信息。
这种情况虽然无法从 props 里拿到对应的数据，但也不意味着不能传递任何未定义的属性数据，在父组件，除了可以给子组件绑定 props ，还可以根据实际需要去绑定一些特殊的属性。
比如给子组件设置 class、id，或者 data-xxx 之类的一些自定义属性，如果子组件 Child.vue 的 template /> 里只有一个根节点，那么这些属性默认会自动继承并渲染在 Node 节点上。
假设当前在子组件 Child.vue 是如下这样只有一个根节点，并且未接收任何 props ：
TIP如果已安装 Vue VSCode Snippets 这个 VSCode 插件，可以在空的 .vue 文件里输入 v3 ，在出现的代码片段菜单里选择 vbase-3-ts 生成一个 Vue 组件的基础代码片段。
子组件
在 Father.vue 里对 Child.vue 传递了多个属性：
回到浏览器，通过 Chrome 的审查元素可以看到子组件 Child.vue 在渲染后，按照 HTML 属性的渲染规则生成了多个属性：
子组件
TIP其中有两个以 data-v- 开头的属性是 标签开启了 Style Scoped 功能自动生成的 Hash 值。
可以在 Child.vue 配置 inheritAttrs 为 false 来屏蔽这些非 props 属性的渲染。
// Child.vue
export default defineComponent({inheritAttrs: false,setup() {// ...},
})关闭了 之后，现在的 DOM 结构如下，只保留了两个由 Style Scoped 生成的 Hash 值：
子组件这一类非 props 属性通常称之为 attrs 。
刚接触 Vue 的开发者可能容易混淆这两者，确实是非常接近，都是由父组件传递，由子组件接收，支持传递的数据类型也一样，但为什么一部分是在 props 获取，一部分在 attrs 获取呢？笔者给出一个比较容易记忆的方式，不一定特别准确，但相信可以帮助开发者加深两者的区别理解。
根据它们的缩写，其实是可以知道 Prop 是指 Property ，而 Attr 是指 Attribute ，虽然都是 “属性” ，但 Property 更接近于事物本身的属性，因此需要在组件里声明，而 Attribute 更偏向于赋予的属性，因此用于指代父组件传递的其他未被声明为 Property 的属性。
获取非 props 的属性
注：这一小节的步骤是在 Child.vue 里操作。
在上一小节 传递非 props 的属性 已经在父组件 Father.vue 里向子组件 Child.vue 传递了一些 attrs 自定义属性，在子组件里想要拿到这些属性，使用原生 JavaScript 操作是需要通过 Element.getAttribute() 方法，但 Vue 提供了更简单的操作方式。
在 Child.vue 里，可以通过 setup 的第二个参数 context 里的 attrs 来获取到这些属性，并且父组件传递了什么类型的值，获取到的也是一样的类型，这一点和使用 Element.getAttribute() 完全不同。
// Child.vue
export default defineComponent({setup(props, { attrs }) {// `attrs` 是个对象，每个 Attribute 都是它的 `key`console.log(attrs.id) // child-componentconsole.log(attrs.class) // class-name-from-father// 传递数组会被保留类型，不会被转换为 `key1,key2` 这样的字符串// 这一点与 `Element.getAttribute()` 完全不同console.log(attrs.keys) // ['foo', 'bar']// 传递对象也可以正常获取console.log(attrs.obj) // {foo: 'bar'}// 如果传下来的 Attribute 带有短横线，需要通过这种方式获取console.log(attrs['data-hash']) // b10a8db164e0754105b7a99be72e3fe5},
})TIP子组件不论是否设置 inheritAttrs 属性，都可以通过 attrs 拿到父组件传递下来的数据，但是如果要使用 Element.getAttribute() 则只有当 inheritAttrs 为 true 的时候才可以，因为此时在 DOM 上才会渲染这些属性。
与 Vue 2 的 template /> 只能有一个根节点不同， Vue 3 允许多个根节点，多个根节点的情况下，无法直接继承这些 attrs 属性（在 inheritAttrs: true 的情况也下无法默认继承），需要在子组件 Child.vue 里通过 v-bind 绑定到要继承在节点上。
可以通过 Vue 实例属性 $attrs 或者从 setup 函数里把 attrs return 出来使用
不会继承使用 $attrs 继承使用 attrs 继承
绑定 emits
注：这一小节的步骤是在 Father.vue 里操作。
如果父组件 Father.vue 需要获取子组件 Child.vue 的数据更新情况，可以由子组件通过 emits 进行通知，下面这个更新用户年龄的例子可以学习如何给子组件绑定 emit 事件。
事件的逻辑是由父组件决定的，因此需要在父组件 Father.vue 的 script /> 里先声明数据变量和一个更新函数，并且这个更新函数通常会有一个入参作为数据的新值接收。
在本例子里，父组件声明了一个 updateAge 方法，它接受一个入参 newAge ，代表新的年龄数据，这个入参的值将由子组件 Child.vue 在触发 emits 时传入。
因为还需要在 template /> 部分绑定给子组件，所以请记得 return 出来。
// Father.vue
import { defineComponent, reactive } from 'vue'
import Child from '@cp/Child.vue'interface Member {id: numbername: stringage: number
}export default defineComponent({components: {Child,},setup() {const userInfo: Member = reactive({id: 1,name: 'Petter',age: 0,})/*** 声明一个更新年龄的方法* @param newAge - 新的年龄，由子组件触发 emits 时传递*/function updateAge(newAge: number) {userInfo.age = newAge}return {userInfo,updateAge,}},
})再看 Father.vue 的 template /> 部分，和 Click 事件使用 @click 一样，自定义的 emits 事件也是通过 v-on 或者是 @ 来绑定：
和 props 一样，官方文档也推荐将 camelCase 风格（小驼峰）命名的函数，在绑定时使用 kebab-case 风格（短横线），例如使用 update-age 代替 updateAge 传递。