Vue組件通信的六種方式，你會幾個？

$parent / $children 與 ref
provide / inject

前言

如上圖所示，A/B，B/C，B/D 組件是父子關系，C/D 是兄弟關系。那如何根據不同的使用場景，選擇不同的通信方式呢？所以前提就是我們要了解不同的通信方式的作用和區別。

一. props / $emit

這個是我們平時用得比較多的方式之一，父組件 A 通過 props 參數向子組件 B 傳遞數據，B 組件通過 $emit 向 A 組件發送一個事件（攜帶參數數據），A組件中監聽 $emit 觸發的事件得到 B 向 A 發送的數據。我們來具體解釋下它的實現步驟：

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 中，就可以很好的實現任何組件中的通信，但是這種方法在項目比較大的時候不太好維護。

舉個 🌰：假設現在有 4 個組件，Home.vue 和 A/B/C 組件，AB 這三個組件是兄弟組件，Home.vue 相當於父組件建立一個空的 Vue 實例,將通信事件掛載在該實例上 -

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)；

這個部分就不詳細介紹了，官方文檔很詳細了 vuex.vuejs.org/zh/guide/st…

四. $attrs / $listeners

如上圖所示，這是一個多級組件的嵌套，那 A/C 組件如何進行通信？我們現在可以想到的有下面幾種方案：

使用 Vuex 來進行數據管理，但是使用的 vuex 的問題在於，如果項目比較小，組件間的共享狀態比較少，那用 vuex 就好比殺雞用牛刀。
利用 B 組件做中轉站，當 A 組件需要把信息傳給 C 組件時，B 接受 A 組件的信息，然后用 props 傳給 C 組件, 但是如果嵌套的組件過多，會導致代碼繁瑣，代碼維護比較困難;如果 C 中狀態的改變需要傳遞給 A, 還要使用事件系統一級級往上傳遞。

在 Vue2.4 中，為了解決該需求，引入了 attrs 和 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 免費交流學習，我都會盡力幫大家哦
本文的文字及圖片來源於網絡加上自己的想法,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯系我們以作處理