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 免費交流學習，我都會盡力幫你們哦
本文的文字及圖片來源於網絡加上本身的想法,僅供學習、交流使用,不具備任何商業用途,版權歸原做者全部,若有問題請及時聯繫咱們以做處理