总结分享Vue中实现组件间通讯的多种方式，再也不怕面试了！

青灯夜游

发布时间：2022-04-18 21:23:28

2445人浏览过

来源于掘金社区

转载

面试官：你有多少种方式实现vue组件间通讯？下面本篇文章给大家总结分享几种实现vue组件间通讯的方式，再也不怕面试了，希望对大家有所帮助！

总结分享Vue中实现组件间通讯的多种方式，再也不怕面试了！

组件化是 Vue 框架的重要思想之一，在前端框架还未出现的时候，通常一个网站页面就是一个文件，如果一个页面有什么数据需要大家使用，直接声明一个全局变量就好了。但是 Vue 框架出现后，将一个页面组件化了，意味着一个页面被分割为了很多个文件，那么组件之间数据的共享就成了一大问题，当然 Vue 为实现组件间的数据共享提供了很多种方法，今天我们就梳理一下到底有哪些方法？（学习视频分享：vuejs教程）

因为项目中常用的就那么几种，所有经常有很多小伙伴在面试的时候说不全，所以还是建议好好理一理。

1.那些场景需要通讯？

由于 Vue 所有的组件呈现组件树的形态，所以组件间的通讯也有很多种情况，大致有以下几种：

立即学习“前端免费学习笔记（深入）”；

父子组件间通讯
兄弟组件间通讯
隔代组件间通讯
无相关组件间通讯

每种场景下建议的通讯方式也不一样，需要根据不同的场景选择最合适的组件间通讯方式。

2.props 和$emit

这种方式通常用于父子组件之间的传值，父组件通过属性的方式将值传递给子组件，子组件通过props进行接收。子组件通过事件的方式向父组件传递数据。

初始化项目：

我们建立一个最简单的Vue项目，分别建了3个组件：parent、child1、child2，然后在APP.vue中引入parent组件，parent组件中引入child1和child2两个子组件，初始运行界面如下：

2.1 父组件传值给子组件

接下来我们利用属性方式从父组件传递值给子组件。

父组件示例代码：

// src/views/parent.vue

我们将父组件中的msg通过:msg="msg"的方式传递给子组件，并且点击按钮的时候会修改父组件中的msg。

子组件示例代码：

// src/views/child1.vue

子组件通过props属性的方式接收父组件传来的数据。

输出结果：

当我们点击按钮的时候，父组件的数据发生变化，子组件接收的数据也跟着发生了变化。

注意：:msg="msg"接收的msg是一个变量，可以参考bind的使用原理，不加：则接收的就是一个字符串。

2.2 子组件传值给父组件

子组件可以通过$emit自定义事件的方式向父组件传递值，父组件需要监听该事件来进行接收子组件传来的值。

父组件示例代码：

// src/views/parent.vue

子组件示例代码：

// src/views/child1.vue

输出结果：

我们在父组件中通过@childData="getChildData"的方式来监听childData事件，从而获取子组件传递的数据，子组件中通过点击按钮触发$emit事件向父组件传递数据。当我们点击按钮“传递数据给父组件”时，父组件便可以获取到数据。

3.$parent获取父组件值

这种方式可以让子组件非常方便的获取父组件的值，不仅仅包括数据，还可以是方法。

子组件示例代码：

// src/views/child1.vue

点击“使用 $parent”按钮时，通过$ parent获取父组件的属性或数据。

输出结果：

我们可以看到控制台打印出了父组件的所有属性，不仅仅包含了data数据，还有里面定义的一些方法等。

4.`$children`和`$refs`获取子组件值

这两种方式和$parent非常的类似，它们可以直接获取子组件的相关属性或方法，不仅限于数据。

父组件示例代码：

// src/views/parent.vue

输出结果：

上段代码中，我们点击按钮，分别通过 $children和$ refs的方式获取到了子组件，从而拿到子组件数据。需要注意的是， $children会返回当前组件所包含的所有子组件数组，使用$ refs时，需要在子组件上添加ref属性，有点类似于直接获取DOM节点的操作。

5.使用`$attrs`和`$listeners`

$attrs是在Vue2.4.0之后新提出的，通常在多层组件传递数据的时候使用。很多小伙伴如果遇到多层组件数据传递的场景，他可能会直接选用Vuex进行传递，但是如果我们需要传递的数据没有涉及到数据的更新和修改时，建议使用$arrts的方式，毕竟Vuex还是比较重。

官网解释：

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

官网的解释还是比较难理解的，我们可以用更加通俗一点的话在解释一遍。

通俗解释：

当父组件传递了很多数据给子组件时，子组件没有声明props来进行接收，那么子组件中的 $attrs属性就包含了所有父组件传来的数据(除开已经props声明了的)，子组件还可以使用v-bind="$ attrs"的形式向它的子组件（孙子组件）传递数据，孙子组件使用$attrs的方式和它的父组件原理类似。

说的再多可能还是没有代码来得简单易懂，我们新建一个孙子组件child1-child.vue，编写之后界面如下：

5.1 $attrs的使用

我们在parent父组件中多传一点数据给child1组件。

parent组件示例代码：

// src/views/parent.vue

这里我们删除了一些本节用不到的代码，大家需要注意一下。

child1组件示例代码：

// src/views/child1.vue

输出结果：

上段代码中我们的parent父组件传递了5个数据给子组件：msg、msg1、msg2、msg3、msg4。但是在子组件中的props属性里面，我们只接收了msg。然后我们在子组件mounted中打印了$attrs，发现恰好少了props接收过的msg数据。

当我们在child1组件中使用 $attrs接收了组件后，可以使用v-bind="$ attrs"的形式在传递给它的子组件child1-child，上段代码中我们已经加上了v-bind。

child1-child组件示例代码：

// src/views/child1-child.vue

输出结果：

我们发现child1-child组件中打印的$attrs中少了msg1，因为我们已经在props中接收了msg1。

5.2 $listeners 的使用

$listeners属性和$ attrs属性和类型，只是它们传递的东西不一样。

官网的解释：

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

Muse AI
下一代无广告视频托管平台

下载

通俗的解释：

当父组件在子组件上定义了一些自定义的非原生事件时，在子组件内部可以通过$listeners属性获取到这些自定义事件。

它和 $attrs的区别很明显，$ attrs用来传递属性，$listeners用来传递非原生事件，我们在child1组件中打印一下看看。

child1组件示例代码：

// src/views/child1.vue
mounted() {
  console.log("child1组件获取$attrs", this.$attrs);
  console.log("child1组件获取$listeners", this.$listeners);
},

输出结果：

可以发现输出了childData方法，这是我们在它的父组件自定义的监听事件。除次之外，$listeners可以通过v-on的形式再次传递给下层组件。

child1组件示例代码：

// src/views/child1.vue

child1-child组件示例代码：

// src/views/child1-child.vue
mounted() {
  console.log("child1-child组件$attrs", this.$attrs);
  console.log("child1-child组件$listerners", this.$listeners);
},

输出结果：

可以看到在child1-child孙子组件中也获得了parent父组件中的childData自定义事件。使用 $listeners的好处在于：如果存在多层级组件，无需使用$ emit的方式逐级向上触发事件，只需要使用$listerners就可以得到父组件中的自定义事件，相当于偷懒了。

5.3 inheritAttrs

可能细心的小伙伴会发现，我们在使用$attrs时，child1子组件渲染的DOM节点上将我们传递的属性一起渲染了出来，如下图所示：

这并不是我们想要的，为了解决这个问题，我们可以在子组件中设置inheritAttrs属性。

官网解释：

默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。

官网说了非常多，但是不太通俗，我们可以简单的理解。

通俗解释：

父组件传递了很多数据给子组件，子组件的props没有完全接收，那么父组件传递的这些数据就会渲染到HTML上，我们可以给子组件设置inheritAttrs 为false，避免这样渲染。

child1组件示例代码：

// src/views/child1.vue
props: {
  msg: {
    type: String,
    default: "",
  },
},
inheritAttrs: false,

输出结果：

此时我们节点上就没有那些无关的节点属性了。

5.4 总结

$attrs：用来传递属性，出了class、style之类的，它是一个对象。
$listeners：用来传递事件，出了原生事件，它也是一个对象。
$attrs和$ listeners这两个属性可以解决多层组件之间数据和事件传递的问题。
inheritAttrs解决未使用props接收的数据的属性渲染。

6.自定义事件：事件总线

在我们做项目的时候，会发现不相关的组件之间的数据传递是较为麻烦的，比如兄弟组件、跨级组件，在不使用Vuex情况下，我们可以使用自定义事件(也可以称作事件中心)的方式来实现数据传递。

事件中心的思想也比较简单：中间中心主要就两个作用：触发事件和监听事件。假如两个组件之间需要传递数据，组件A可以触发事件中心的事件，组件B监听事件中心的事件，从而让两个组件之间产生关联，实现数据传递。

实现步骤：

为了演示简单，我们在全局注册一个事件中心，修改main.js。

main.js代码如下：

// src/main.js
Vue.config.productionTip = false
Vue.prototype.$EventBus = new Vue()
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

child1组件示例代码：

child1组件中调用 $EventBus.$ emit向事件中心添加sendMsg事件，这个用法有点类似与props和$emit的关系。