Vue 组件通信方式居然有这么多？
共 9218字，需浏览 19分钟
·
2022-03-10 23:11
vue组件通信的方式，这是在面试中一个非常高频的问题，我刚开始找实习便经常遇到这个问题，当时只知道回到props和 $emit，后来随着学习的深入，才发现vue组件的通信方式竟然有这么多！
今天对vue组件通信方式进行一下总结，如写的有疏漏之处还请大家留言。
1. props/$emit
简介
props和 $emit相信大家十分的熟悉了，这是我们最常用的vue通信方式。
props： props可以是数组或对象，用于接收来自父组件通过v-bind传递的数据。当props为数组时，直接接收父组件传递的属性；当 props 为对象时，可以通过type、default、required、validator等配置来设置属性的类型、默认值、是否必传和校验规则。
$emit： 在父子组件通信时，我们通常会使用 $emit来触发父组件v-on在子组件上绑定相应事件的监听。
代码实例
下面通过代码来实现一下props和 $emit的父子组件通信，在这个实例中，我们都实现了以下的通信：
父向子传值：父组件通过 :messageFromParent="message"将父组件 message 值传递给子组件，当父组件的 input 标签输入时，子组件p标签中的内容就会相应改变。子向父传值：父组件通过 @on-receive="receive"在子组件上绑定了 receive 事件的监听，子组件 input 标签输入时，会触发 receive 回调函数， 通过this.$emit('on-receive', this.message)将子组件 message 的值赋值给父组件 messageFromChild ，改变父组件p标签的内容。
请看代码：
// 子组件代码
<template>
<div class="child">
<h4>this is child componenth4>
<input type="text" v-model="message" @keyup="send" />
<p>收到来自父组件的消息：{{ messageFromParent }}p>
div>
template>
<script>
export default {
name: 'Child',
props: ['messageFromParent'], // 通过props接收父组件传过来的消息
data() {
return {
message: '',
}
},
methods: {
send() {
this.$emit('on-receive', this.message) // 通过 $emit触发on-receive事件，调用父组件中receive回调，并将this.message作为参数
},
},
}
script>
// 父组件代码
"parent">
this is parent component
type="text" v-model="message" />
收到来自子组件的消息：{{ messageFromChild }}
"message" @on-receive="receive" />
效果预览
2. v-slot
简介
v-slot是 Vue2.6 版本中新增的用于统一实现插槽和具名插槽的api，用于替代slot(2.6.0废弃)、slot-scope(2.6.0废弃)、scope(2.5.0废弃)等api。
v-slot在 template 标签中用于提供具名插槽或需要接收 prop 的插槽，如果不指定 v-slot ，则取默认值 default 。
代码实例
下面请看v-slot的代码实例，在这个实例中我们实现了:
父向子传值：父组件通过 {{ message }}将父组件的message值传递给子组件，子组件通过
// 子组件代码
<template>
<div class="child">
<h4>this is child componenth4>
<p>收到来自父组件的消息：
<slot name="child">slot>
p>
div>
template>
"parent">
this is parent component
type="text" v-model="message" />
{{ message }}
效果预览
3. $refs/ $parent/$children/$root
简介
我们也同样可以通过 $refs/$parent/$children/$root 等方式获取 Vue 组件实例，得到实例上绑定的属性及方法等，来实现组件之间的通信。
$refs： 我们通常会将 $refs绑定在DOM元素上，来获取DOM元素的 attributes。在实现组件通信上，我们也可以将 $refs 绑定在子组件上，从而获取子组件实例。
$parent： 我们可以在 Vue 中直接通过this.$parent来获取当前组件的父组件实例（如果有的话）。
$children： 同理，我们也可以在 Vue 中直接通过this.$children来获取当前组件的子组件实例的数组。但是需要注意的是，this.$children数组中的元素下标并不一定对用父组件引用的子组件的顺序，例如有异步加载的子组件，可能影响其在 children 数组中的顺序。所以使用时需要根据一定的条件例如子组件的name去找到相应的子组件。
$root： 获取当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。通过 $root ，我们可以实现组件之间的跨级通信。
代码实例
下面来看一个$parent和 $children 使用的实例（由于这几个api的使用方式大同小异，所以关于$refs和 $root 的使用就不在这里展开了，在这个实例中实现了：
父向子传值：子组件通过 $parent.message获取到父组件中message的值。子向父传值：父组件通过 $children获取子组件实例的数组，在通过对数组进行遍历，通过实例的 name 获取到对应 Child1 子组件实例将其赋值给 child1，然后通过child1.message获取到 Child1 子组件的message。
代码如下：
// 子组件
<template>
<div class="child">
<h4>this is child componenth4>
<input type="text" v-model="message" />
<p>收到来自父组件的消息：{{ $parent.message }}p>
div>
template>
<script>
export default {
name: 'Child1',
data() {
return {
message: '', // 父组件通过this.$children可以获取子组件实例的message
}
},
}
script>
// 父组件
"parent">
this is parent component
type="text" v-model="message" />
收到来自子组件的消息：{{ child1.message }}
效果预览
4. $attrs/$listener
简介
$attrs和$listeners 都是 Vue2.4 中新增加的属性，主要是用来供使用者用来开发高级组件的。
$attrs： 用来接收父作用域中不作为 prop 被识别的 attribute 属性，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。
试想一下，当你创建了一个组件，你要接收 param1 、param2、param3 …… 等数十个参数，如果通过 props，那你需要通过props: ['param1', 'param2', 'param3', ……]等声明一大堆。如果这些 props 还有一些需要往更深层次的子组件传递，那将会更加麻烦。
而使用 $attrs ，你不需要任何声明，直接通过$attrs.param1、$attrs.param2……就可以使用，而且向深层子组件传递上面也给了示例，十分方便。
$listeners： 包含了父作用域中的 v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用，这里在传递时的使用方法和 $attrs 十分类似。
代码实例
在这个实例中，共有三个组件：A、B、C，其关系为：[ A [ B [C] ] ]，A为B的父组件，B为C的父组件。即：1级组件A，2级组件B，3级组件C。我们实现了：
父向子传值：1级组件A通过 :messageFromA="message"将 message 属性传递给2级组件B，2级组件B通过$attrs.messageFromA获取到1级组件A的 message 。跨级向下传值：1级组件A通过 :messageFromA="message"将 message 属性传递给2级组件B，2级组件B再通过v-bind="$attrs"将其传递给3级组件C，3级组件C通过$attrs.messageFromA获取到1级组件A的 message 。子向父传值：1级组件A通过 @keyup="receive"在子孙组件上绑定keyup事件的监听，2级组件B在通过v-on="$listeners"来将 keyup 事件绑定在其 input 标签上。当2级组件B input 输入框输入时，便会触发1级组件A的receive回调，将2级组件B的 input 输入框中的值赋值给1级组件A的 messageFromComp ，从而实现子向父传值。跨级向上传值：1级组件A通过 @keyup="receive"在子孙组件上绑定keyup事件的监听，2级组件B在通过v-on="$listeners"来将 keyup 事件绑定在其 input 标签上。当3级组件C input 输入框输入时，便会触发1级组件A的receive回调，将3级组件C的 input 输入框中的值赋值给1级组件A的 messageFromComp ，从而实现跨级向上传值。
代码如下：
// 3级组件C
<template>
<div class="compc">
<h5>this is C componenth5>
<input name="compC" type="text" v-model="message" v-on="$listeners" />
<p>收到来自A组件的消息：{{ $attrs.messageFromA }}p>
div>
template>
<script>
export default {
name: 'Compc',
data() {
return {
message: '',
}
},
}
script>
// 2级组件B
"compb">
this is B component
"compB" type="text" v-model="message" v-on="$listeners" />
收到来自A组件的消息：{{ $attrs.messageFromA }}
"$attrs" v-on="$listeners" />
// A组件
"compa">
this is A component
type="text" v-model="message" />
收到来自{{ comp }}的消息：{{ messageFromComp }}
"message" @keyup="receive" />
