Vue组件通讯的六种方式，你会几个？

$parent / $children 与 refhtml
provide / injectvue

前言

如上图所示，A/B，B/C，B/D 组件是父子关系，C/D 是兄弟关系。那如何根据不一样的使用场景，选择不一样的通讯方式呢？因此前提就是咱们要了解不一样的通讯方式的做用和区别。web

一. props / $emit

这个是咱们平时用得比较多的方式之一，父组件 A 经过 props 参数向子组件 B 传递数据，B 组件经过 $emit 向 A 组件发送一个事件（携带参数数据），A组件中监听 $emit 触发的事件获得 B 向 A 发送的数据。咱们来具体解释下它的实现步骤：vuex

1：父组件向子组件传值

// App.vue 父组件
<template>
    <a-compontent :data-a="dataA"></a-compontent> </template> <script> import aCompontent from './components/A.vue'; export default { name: 'app', compontent: { aCompontent }, data () { return { dataA: 'dataA数据' } } } // aCompontent 子组件 <template> <p>{{dataA}}</p> // 在子组件中把父组件传递过来的值显示出来 </template> <script> export default { name: 'aCompontent', props: { dataA: { //这个就是父组件中子标签自定义名字 type: String, required: true // 或者false } } } </script> 复制代码

2：子组件向父组件传值（经过事件方式）

// 子组件
<template>
    <p @click="sendDataToParent">点击向父组件传递数据</p> </template> <script> export default { name: 'child', methods:{ changeTitle() { this.$emit('sendDataToParent','这是子组件向父组件传递的数据'); // 自定义事件，会触发父组件的监听事件，并将数据以参数的形式传递 } } } // 父组件 <template> <child @sendDataToParent="getChildData"></child> </template> <script> import child from './components/child.vue'; export default { name: 'child', methods:{ getChildData(data) { console.log(data); // 这里的获得了子组件的值 } } } </script> 复制代码

二. $emit / $on

这种方式是经过一个相似 App.vue 的实例做为一个模块的事件中心，用它来触发和监听事件，若是把它放在 App.vue 中，就能够很好的实现任何组件中的通讯，可是这种方法在项目比较大的时候不太好维护。api

举个 🌰：假设如今有 4 个组件，Home.vue 和 A/B/C 组件，AB 这三个组件是兄弟组件，Home.vue 至关于父组件创建一个空的 Vue 实例,将通讯事件挂载在该实例上 -bash

D.js
import Vue from 'vue' export default new Vue() 复制代码

// 咱们能够在router-view中监听change事件，也能够在mounted方法中监听
// home.vue
<template> <div> <child-a /> <child-b /> <child-c /> </div> </template> 复制代码

// A组件
<template>
  <p @click="dataA">将A组件的数据发送给C组件 - {{name}}</p> </template> <script> import Event from "./D"; export default { data() { return { name: 'Echo' } }, components: { Event }, methods: { dataA() { Event.$emit('data-a', this.name); } } } </script> 复制代码

// B组件
<template>
  <p @click="dataB">将B组件的数据发送给C组件 - {{age}}</p> </template> <script> import Event from "./D"; export default { data() { return { age: '18' } }, components: { Event }, methods: { dataB() { Event.$emit('data-b', this.age); } } } </script> 复制代码

// C组件
<template>
  <p>C组件获得的数据 {{name}} {{age}}</p>
</template>
<script>
import Event from "./D"; export default { data() { return { name: '', age: '' } }, components: { Event }, mounted() { // 在模板编译完成后执行 Event.$on('data-a', name => { this.name = name; }) Event.$on('data-b', age => { this.age = age; }) } } </script> 复制代码

上面的 🌰 里咱们能够知道，在 C 组件的 mounted 事件中监听了 A/B 的 $emit 事件，并获取了它传递过来的参数（因为不肯定事件何时触发，因此通常在 mounted / created 中监听）网络

三. Vuex

Vuex 是一个状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 应用的核心是 store（仓库，一个容器），store 包含着你的应用中大部分的状态 (state)；app

这个部分就不详细介绍了，官方文档很详细了 vuex.vuejs.org/zh/guide/st…dom

四. $attrs / $listeners

如上图所示，这是一个多级组件的嵌套，那 A/C 组件如何进行通讯？咱们如今能够想到的有下面几种方案：ide

使用 Vuex 来进行数据管理，可是使用的 vuex 的问题在于，若是项目比较小，组件间的共享状态比较少，那用 vuex 就比如杀鸡用牛刀。
利用 B 组件作中转站，当 A 组件须要把信息传给 C 组件时，B 接受 A 组件的信息，而后用 props 传给 C 组件, 可是若是嵌套的组件过多，会致使代码繁琐，代码维护比较困难;若是 C 中状态的改变须要传递给 A, 还要使用事件系统一级级往上传递。

在 Vue2.4 中，为了解决该需求，引入了listeners ，新增了 inheritAttrs 选项。(以下图所示)

🌰：（$attrs 的做用，某些状况下须要结合 inheritAttrs 一块儿使用）

有 4 个组件：App.vue / child1.vue / child2.vue / child3.vue，这 4 个组件分别的依次嵌套的关系。

// App.vue
<template>
  <div id="app"> <p>App.vue</p><hr> // 这里咱们能够看到，app.vue向下一集的child1组件传递了5个参数，分别是name / age / job / sayHi / title <child1 :name="name" :age="age" :job="job" :say-Hi="say" title="App.vue的title"></child1> </div> </template> <script> const child1 = () => import("./components/child1.vue"); export default { name: 'app', components: { child1 }, data() { return { name: "Echo", age: "18", job: "FE", say: "this is Hi~" }; } }; </script> 复制代码

// child1.vue
<template>
  <div class="child1"> <p>child1.vue</p> <p>name: {{ name }}</p> <p>childCom1的$attrs: {{ $attrs }}</p> <p>能够看到，$attrs这个对象集合中的值 = 全部传值过来的参数 - props中显示定义的参数</p> <hr> <child2 v-bind="$attrs"></child2> </div> </template> <script> const child2 = () => import("./child2.vue"); export default { components: { child2 }, // 这个inheritAttrs默认值为true，不定义这个参数值就是true，可手动设置为false // inheritAttrs的意义在用，能够在从父组件得到参数的子组件根节点上，将全部的$attrs以dom属性的方式显示 inheritAttrs: true, // 能够关闭自动挂载到组件根元素上的没有在props声明的属性 props: { name: String // name做为props属性绑定 }, created() { // 这里的$attrs就是全部从父组件传递过来的全部参数 而后 除去props中显式定义的参数后剩下的全部参数！！！ console.log(this.$attrs); // 输出{age: "18", job: "FE", say-Hi: "this is Hi~", title: "App.vue的title"} } }; </script> 复制代码

// child2.vue
<template>
  <div class="child2"> <p>child2.vue</p> <p>age: {{ age }}</p> <p>childCom2: {{ $attrs }}</p> <hr> <child3 v-bind="$attrs"></child3> </div> </template> <script> const child3 = () => import("./child3.vue"); export default { components: { child3 }, // 将inheritAttrs设置为false以后，将关闭自动挂载到组件根元素上的没有在props声明的属性 inheritAttrs: false, props: { age: String }, created() { // 同理和上面同样，$attrs这个对象集合中的值 = 全部传值过来的参数 - props中显示定义的参数 console.log(this.$attrs); } }; </script> 复制代码

// child3.vue
<template>
  <div class="child3"> <p>child3.vue</p> <p>job: {{job}}</p> <p>title: {{title}}</p> <p>childCom3: {{ $attrs }}</p> </div> </template> <script> export default { inheritAttrs: true, props: { job: String, title: String } }; </script> 复制代码

来看下具体的显示效果：

而$listeners怎么用呢，官方文档说的是：包含了父做用域中的 (不含 .native 修饰器的) v-on 事件监听器。它能够经过 v-on="$listeners" 传入内部组件——在建立更高层次的组件时很是有用！从字面意思来理解应该是在须要接受值的父组件增长一个监听事件？话很少说，上代码

仍是 3 个依次嵌套的组件

<template>
  <div class="child1"> <child2 v-on:upRocket="reciveRocket"></child2> </div> </template> <script> const child2 = () => import("./child2.vue"); export default { components: { child2 }, methods: { reciveRocket() { console.log("reciveRocket success"); } } }; </script> 复制代码

<template>
  <div class="child2"> <child3 v-bind="$attrs" v-on="$listeners"></child3> </div> </template> <script> const child3 = () => import("./child3.vue"); export default { components: { child3 }, created() { this.$emit('child2', 'child2-data'); } }; </script> 复制代码

// child3.vue
<template>
  <div class="child3"> <p @click="startUpRocket">child3</p> </div> </template> <script> export default { methods: { startUpRocket() { this.$emit("upRocket"); console.log("startUpRocket"); } } }; </script> 复制代码

这里的结果是，当咱们点击 child3 组件的 child3 文字，触发 startUpRocket 事件，child1 组件就能够接收到，并触发 reciveRocket 打印结果以下：

> reciveRocket success
> startUpRocket
复制代码

五. $parent / $children 与 ref

ref：若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子组件上，引用就指向组件实例
$parent / $children：访问父 / 子实例

这两种方式都是直接获得组件实例，使用后能够直接调用组件的方法或访问数据。

咱们先来看个用 ref 来访问组件的 🌰：

// child1子组件
export default { data() { return { title: 'Vue.js' }; }, methods: { sayHello() { console.log('child1!!'); } } }; 复制代码

// 父组件
<template>
  <child1 @click="sayHi" ref="child1"></child1> </template> <script> export default { methods: { sayHi () { const child1 = this.$refs.child1; console.log(child1.title); // Vue.js child1.sayHello(); // 弹窗 } } } </script> 复制代码

六. provide/inject

provide/inject 是 Vue2.2.0 新增 API,这对选项须要一块儿使用，以容许一个祖先组件向其全部子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。若是你熟悉 React，这与 React 的上下文特性很类似。

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

因为本身对这部分的内容理解不是很深入，因此感兴趣的能够前往官方文档查看： cn.vuejs.org/v2/api/#pro…

总结

常见使用场景能够分为三类：

父子通讯：props / $emit；$parent / $children；$attrs/$listeners；provide / inject API； ref
兄弟通讯：Vuex
跨级通讯：Vuex；$attrs/$listeners；provide / inject API
4.接下来我还会在个人裙里用视频讲解的方式给你们讲解【如下图中的内容】有兴趣的能够来个人扣扣裙 519293536 免费交流学习，我都会尽力帮你们哦
本文的文字及图片来源于网络加上本身的想法,仅供学习、交流使用,不具备任何商业用途,版权归原做者全部,若有问题请及时联系咱们以做处理