コンポーネント間通信のVue 6つの方法

序文

コンポーネントインスタンスのスコープがお互いを参照することはできませんデータのさまざまなコンポーネント間を意味し、互いに独立している間Vue.js成分は、最も強力な機能の一つです。一般的には、コンポーネントは次のような関係を持つことができます。

上記のように、AとB、BとC、BとDは父親であり、C及びDは、Aの兄弟であり、Cは、世代関係（おそらく多世代パーティション）です。異なるシナリオを使用するには、どのように有効な手段の通信を選択するには？

方法、小道具/ $を発します

親成分Bは、小道具を介してサブアセンブリに伝達されます。

1.親コンポーネントサブアセンブリに渡された値

次に、私たちの例による方法を発見彼Xiangzaiとして親コンポーネント伝達アセンブリ：ユーザーがどのように親コンポーネント内のデータを取得するためのApp.vueサブアセンブリUsers.vueで：[「ヘンリー」、「バッキー」、「エミリー」]

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'App', data(){ return{ users:["Henry","Bucky","Emily"] } }, components:{ "users":Users } } 复制代码

//users子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array, required:true } } } </script> 复制代码

概要：親コンポーネントサブアセンブリは、小道具を下のデータを渡すことができます。注意：データ、小道具、計算：データの形式の3つのコンポーネントがあります。

2.親コンポーネントに値によってサブコンポーネント（イベントスルーが形成さ）

次に、親サブアセンブリコンポーネントに値を渡す方法の例を使用します。私たちは「Vue.jsデモ」をクリックすると、サブアセンブリは、親コンポーネントに値を渡す、からテキスト「の値の転送は、」 "となります値によって親サブアセンブリに「成分値を達成するために、親サブアセンブリに送信されます。

// 子组件
<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
  </header>
</template>
<script>
export default {
  name: 'app-header',
  data() { return { title:"Vue.js Demo" } }, methods:{ changeTitle() { this.$emit("titleChanged","子向父组件传值");//自定义事件 传递值“子向父组件传值” } } } </script> 复制代码

// 父组件
<template>
  <div id="app">
    <app-header @titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
   // updateTitle($event)接受传递过来的文字
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default { name: 'App', data(){ return{ title:"传递的是一个值" } }, methods:{ updateTitle(e){ //声明这个函数 this.title = e; } }, components:{ "app-header":Header, } } </script> 复制代码

概要：サブコンポーネントはイベントによって親コンポーネントにメッセージを送信するためには、実際には、サブアセンブリは、親コンポーネントにデータを送信します。

第二の方法、中央イベントバスEventBus

父と息子の関係はありません通信のために、父と息子の間の道の上のコンポーネントが完全に達成可能であるが、二つの成分のために、そしてどのようにそれを伝える必要がありますか？小規模プロジェクトのケースでは、中央イベントバスEventBus方法を使用することができます。あなたのプロジェクトが大規模および中規模であれば、あなたは私たちの後ろに導入するVuex状態管理を使用することができます。また、イベント・バスとして知られているEventBus EventBusの紹介。EventBusは、ブリッジの概念はすべての共通コンポーネントの中心と同じイベントであるとして、あなたはコンポーネントが他のコンポーネントに通知するために、平行に上下できるように、イベントの中心にイベントを受信または送信するために登録することができVueの中で使用することができますが、それはあまりにもあります状態管理センターとして、より良いVuexため、したがって必要性、不注意であれば、それはそれが困難な災害を維持するために行います、非常に使いやすい、という概念は、共有状態レベルに上昇を通知されます。

それのコンポーネント間のデータ通信を実現するためにVueのプロジェクトでEventBusを使用する方法EventBusを使用する方法？詳細は、以下の工程によって達成することができます。

あなたがする必要がある最初の事はイベントバスを作成し、他のモジュールにエクスポートされるか、それを聞くために使用することができます初期化。我々は2つの方法で処理することができます。まず、このようなeventBus.jsなどの新しいの.jsファイルを作成するために、最初のを見て：

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
复制代码

あなたは何をする必要があります（この場合、私はEventBusそれを呼び出す）のVueを導入し、インスタンスをエクスポートすることです。それが唯一のインスタンスメソッドを持っていることだけですので、それは非常に軽いです、基本的にDOMを持っていないコンポーネントです。もう一つの方法は、プロジェクトmain.js初期化EventBusに直接することができます：

// main.js
Vue.prototype.$EventBus = new Vue()
复制代码

これはEventBusグローバルイベントバスを初期化する方法であり、今私たちはEventBusを作成していることに注意してください、そして、あなたがする必要があるコンポーネントでそれをロードして、アセンブリ内のあなたの父と息子と同じように呼んでいます各メッセージが送信されます。

例：トリガーA.vue

import EventBus from 'eventBus.js'; 
// 必须引入同一个实例

methods： {
    doSomething() {
        EventBus.$emit("getTarget", 22); console.log("向getTarget方法传参22"); } } 复制代码

リスニングイベントでB.vue

import EventBus from 'eventBus.js'; 
// 我们在create钩子中监听方法
create(){
    console.log("this.getTarget是一个带参数的方法，但是这边只要将两者关联起来");
    EventBus.$on('getTarget', this.getTarget); }, beforeDestroy() { console.log("组件销毁前需要解绑事件。否则会出现重复触发事件的问题"); EventBus.$off('getTarget', this.getTarget); }, methods: { getTarget(param) { // todo } } 复制代码

実際には非常に便利eventBus、通信の構成要素のいずれかは、それを用いて達成することができます。しかし、我々は状況が容易、メンテナンスに応じてモードを選択します。eventBus比較的乏しいリスナーが対応する場所を見つけるか、イベントが特定の実施をトリガするので、一般的に実装上記複数の通信コンポーネントが考えられます。EventBusの使用との間の通信、およびモジュール内、vuex通信を使用して、メンテナンスデータ、ロジックに明確であろう。

方法3、vuex

1.簡単な紹介Vuex原則

コンポーネントは、あなたが州内のデータを変更したいときVuexは、州内に格納されたデータは、グローバルあり、一方向のデータフローを実装して、更新された状態のデータを取得するために、外部プラグインの呼び出しのための加入者モードを提供しながら、突然変異、突然変異によって行われなければなりません。国家のデータは、すべての非同期（アップデートを取得するバックエンド・インターフェースの非同期呼び出しでは一般的）操作またはバッチ同期操作がアクションを取る必要があるが、また、直接、国家のアクションを変更することができない、または変異によって変更する必要がある場合。最後に、国家の変化に応じて、ビューをレンダリングします。

2.プロセスの概要の各モジュールの機能：

Vueのコンポーネント：Vueのコンポーネント。HTMLページ、ユーザの操作を受信するための責任の相互作用は、発送方法を実行し、応答で対応するアクションをトリガーします。

ディスパッチ：オペレーティング行動のトリガー方法は、アクションを実行することができる唯一の方法です。

アクション：運転動作処理モジュール、組立の$ store.dispatch（「アクション名」、DATA1）によってトリガ。そして、コミット（）の変異、間接的な更新状態をトリガするために呼び出します。Vueのコンポーネントは、受信したすべての対話を処理するための責任。同期/非同期動作を含む、順番に登録の順序をトリガ同じ名前のメソッドをサポートします。トリガー他のアクションを含め、このモジュールでは上のバックエンドのAPI操作に要求し、操作変異を提出します。このモジュールは、チェーンをトリガしたアクションをサポートするための約束のパッケージが用意されています。

コミット：運転状態の変更方法をコミットします。突然変異に提出、それはの突然変異を実行するための唯一の方法です。

mutations：状态改变操作方法，由actions中的 commit('mutation 名称')来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。

state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。

getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

3.具体使用：

store/index.js

import Vuex from 'vuex';
import Vue from 'vue';
Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        stateName: 'xxxx'
    },
    mutations: {
       mutationsName(state, {params}) {
           state.stateName = params;
            console.log("只有在mutations中才能直接改变state中的值")
       } 
    },
    actions: {
        actionName({ state,commit}, {params}) {
        let actionParam = 'mmm'; commit('mutationsName', actionParam ); console.log(" 触发mutation 方法要用commit分发，以此改变state"); } } }); export default store; 复制代码

main.js

import store from './store/index.js';
new Vue({
  el: '#app',
  store,
  console.log("将store挂载到vue实例上")
  render: h => h(App)
})
复制代码

在组件中使用

child.vue js部分

**import { mapActions, mapMutations, mapState } from 'vuex';
export default {
    computed: {
        ...mapState({ stateName })
    },
    methods: {
        ...mapActions(['actionName']),
        ...mapMutations(['mutationName'])
        console.log("使用辅助函数mapMutations直接将触发函数映射到methods上") } // 接下来在实例中就可以用this.stateName,this.actionName来调用 } 复制代码

当兄弟组件很多，涉及到的处理数据庞大的时候，可以用到vuex中的modules，使得结构更加清晰

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
复制代码

方法四、 attrs/ listeners

1.简介

多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。父子组件之间的数据传输有一个问题：如果父组件A下面有子组件B，组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢？如果采用props方法，我们必须让组件A通过prop传递消息给组件B，组件B在通过prop传递消息给组件C；要是组件A和组件C之间有更多的组件，那采用这种方式就很复杂了。Vue 2.4开始提供了attrs和listeners来解决这个问题，能够让组件A之间传递消息给组件C。

官网对 $attrs 的解释如下：

$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
复制代码

官网对 $listeners 的解释如下：

$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
复制代码

以上是官网对$attrs的解释，我刚看我也是一脸懵逼，回去试了一下其实并不难，而且比较适用组件深层嵌套场景下，祖先组件向子组件传值的问题

我的理解：

意思就是父组件传向子组件传的，子组件不prop接受的数据都会放在$attrs中，子组件直接用this.$attrs获取就可以了。如过从父->孙传，就在子组件中添加v-bind='$attrs'，就把父组件传来的子组件没props接收的数据全部传到孙组件；我觉得 $attrs 和 $listeners 属性像两个收纳箱，一个负责收纳属性，一个负责收纳事件，都是以对象的形式来保存数据； 复制代码

接下来我们看个跨级通信的例子：

// index.vue
<template>
  <div>
    <h2>科大讯飞</h2>
    <child-com1
      :foo="foo"
      :boo="boo"
      :coo="coo"
      :doo="doo"
      @one.native="triggerOne" @two="triggerTwo" title="Vue通信" ></child-com1> </div> </template> <script> const childCom1 = () => import("./childCom1.vue"); export default { components: { childCom1 }, data() { return { foo: "Javascript", boo: "Html", coo: "CSS", doo: "Vue" }; }, methods:{ triggerOne(){ alert('one') }, triggerTwo(){ alert('two') } } }; </script> 复制代码

// childCom1.vue
<template class="border">
  <div>
    <p>foo: {{ foo }}</p>
    <p>childCom1的$attrs: {{ $attrs }}</p>
    <child-com2 v-bind="$attrs" v-on="$listeners"></child-com2> </div> </template> <script> const childCom2 = () => import("./childCom2.vue"); export default { components: { childCom2 }, // 默认为true，如果传入的属性子组件没有prop接受，就会以字符串的形式出现为标签属性 // 设为false，在dom中就看不到这些属性，试一下就知道了 inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性 props: { foo: String // foo作为props属性绑定 }, mounted() { console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "Vue通信" } console.log(this.$listeners); } }; </script> 复制代码

// childCom2.vue
<template>
  <div class="border">
    <p>boo: {{ boo }}</p>
    <p>childCom2的$attrs: {{ $attrs }}</p>
    <child-com3 v-bind="$attrs" v-on="$listeners"></child-com3> </div> </template> <script> const childCom3 = () => import("./childCom3.vue"); export default { components: { childCom3 }, inheritAttrs: false, props: { boo: String }, mounted() { console.log(this.$attrs); // {"coo": "CSS", "doo": "Vue", "title": "Vue通信" } console.log(this.$listeners); } }; </script> 复制代码

// childCom3.vue
<template>
  <div class="border">
    <p>childCom3: {{ $attrs }}</p>
  </div>
</template>
<script>
export default {
  props: {
    coo: String,
    title: String
  },
  mounted() { console.log(this.$listeners); // this.$listeners.two(); } }; </script> 复制代码

$attrs表示没有继承数据的对象，格式为{属性名：属性值}。Vue2.4提供了 $attrs , $listeners 来传递数据与事件，跨级组件之间的通讯变得更简单。
简单来说： $attrs与 $listeners 是两个对象， $attrs 里存放的是父组件中绑定的非 Props 属性， $listeners里存放的是父组件中绑定的非原生事件。 复制代码

方法五、 provide/inject (底层的通用组件时，使用频率会很高)

1.简介

Vue2.2.0新增API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。一言而蔽之：祖先组件中通过provider提供变量，然后在子孙组件中通过inject来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。来看下官方对 provide / inject 的描述： provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。并且这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

2.举个例子

假设有两个组件： A.vue 和 B.vue，B 是 A 的子组件

// A.vue
export default {
  provide: {
    name: '科大讯飞'
  }
}
复制代码

// B.vue
export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // 科大讯飞
  }
}
复制代码

可以看到，在 A.vue 里，我们设置了一个 provide: name，值为科大讯飞，它的作用就是将 name 这个变量提供给它的所有子组件。而在 B.vue 中，通过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，就可以直接通过 this.name 访问这个变量了，它的值也是科大讯飞。这就是 provide / inject API 最核心的用法。

需要注意的是：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的----vue官方文档。所以，上面 A.vue 的 name 如果改变了，B.vue 的 this.name 是不会改变的，仍然是科大讯飞。

3.provide与inject 怎么实现数据响应式

一般来说，有两种办法：

provide祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在子孙组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如props，methods

使用2.6最新API Vue.observable 优化响应式 provide(推荐) 我们来看个例子：孙组件E 和获取A组件传递过来的color值，并能实现数据响应式变化，即A组件的color变化后，组件E、F会跟着变（核心代码如下：）

// A 组件 
<div>
      <h1>A 组件</h1>
      <button @click="() => changeColor()">改变color</button>
      <ChildrenB />
      <ChildrenC />
</div>
......
  data() {
    return {
      color: "blue" }; }, // provide() { // return { // theme: { // color: this.color //这种方式绑定的数据并不是可响应的 // } // 即A组件的color变化后，组件E、F 不会跟着变 // }; // }, provide() { return { theme: this//方法一：提供祖先组件的实例 }; }, methods: { changeColor(color) { if (color) { this.color = color; } else { this.color = this.color === "blue" ? "red" : "blue"; } } } // 方法二:使用vue2.6最新API Vue.observable 优化响应式 provide // provide() { // this.theme = Vue.observable({ // color: "blue" // }); // return { // theme: this.theme // }; // }, // methods: { // changeColor(color) { // if (color) { // this.theme.color = color; // } else { // this.theme.color = this.theme.color === "blue" ? "red" : "blue"; // } // } // } 复制代码

// F 组件 
<template functional>
  <div class="border2">
    <h3 :style="{ color: injections.theme.color }">F 组件</h3>
  </div>
</template>
<script>
export default {
  inject: {
    theme: {
      //函数式组件取值不一样
      default: () => ({})
    }
  }
};
</script>
复制代码

虽说provide 和 inject 主要为高阶插件/组件库提供用例，但如果你能在业务中熟练运用，可以达到事半功倍的效果！

方法六、 parent / children ＆ ref

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

需要注意的是：这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。我们先来看个用 ref来访问组件的例子：

// component-a 子组件
export default {
  data () {
    return { title: 'Vue.js' } }, methods: { sayHello () { window.alert('Hello'); } } } 复制代码

// 父组件
<template>
  <component-a ref="comA"></component-a>
</template>
<script>
  export default {
    mounted () { const comA = this.$refs.comA; console.log(comA.title); // Vue.js comA.sayHello(); // 弹窗 } } </script> 复制代码

$parent 和 $children
复制代码

这里要说的这种方式就比较直观了，直接操作父子组件的实例。 $parent 就是父组件的实例对象，而$ children 就是当前实例的直接子组件实例了，不过这个属性值是数组类型的，且并不保证顺序，也不是响应式的。 parent组件：

<template>
    <div class="">
      <p>this is parent component!</p>
        <button @click="changeChildValue">test</button>
      <child />
    </div>
</template>

<script>
export default {
    data() { return { message: 'hello' } }, methods: { changeChildValue(){ this.$children[0].mymessage = 'hello'; } }, } </script> <style lang="less" scoped> </style> 复制代码

children组件：

<template>
    <div class="">
      <input type="text" v-model="mymessage" @change="changeValue" /> </div> </template> <script> export default { data() { return { mymessage: this.$parent.message } }, methods: { changeValue(){ this.$parent.message = this.mymessage;//通过如此调用可以改变父组件的值 console.log(this.$parent.message) } } } </script> <style lang="less" scoped> </style> 复制代码

不过，这两种方法的弊端是，无法在跨级或兄弟间通信。

// parent.vue
<component-a></component-a>
<component-b></component-b>
<component-b></component-b>
复制代码

我们想在 component-a 中，访问到引用它的页面中（这里就是 parent.vue）的两个 component-b 组件，那这种情况下，就得配置额外的插件或工具了，比如 Vuex 和 Bus 的解决方案。

总结

常见使用场景可以分为三类：
父子通信： 父向子传递数据是通过 props，子向父是通过 events（ $emit）；通过父链 / 子链也可以通信（ $parent / $children）；ref 也可以访问组件实例；provide / inject API； $attrs/$listeners 兄弟通信： Bus；Vuex 跨级通信： Bus；Vuex；provide / inject API、 $attrs/$listeners