vue組件間通信六種方式（完整版）

前言

組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。一般來說，組件可以有以下幾種關(guān)系：

need-to-insert-img

如上圖所示，A 和 B、B 和 C、B 和 D 都是父子關(guān)系，C 和 D 是兄弟關(guān)系，A 和 C 是隔代關(guān)系（可能隔多代）。

針對(duì)不同的使用場(chǎng)景，如何選擇行之有效的通信方式？這是我們所要探討的主題。本文總結(jié)了vue組件間通信的幾種方式，如props、$emit/$on、vuex、$parent?/$children、$attrs/$listeners和provide/inject，以通俗易懂的實(shí)例講述這其中的差別及使用場(chǎng)景，希望對(duì)小伙伴有些許幫助。

本文的代碼請(qǐng)猛戳github博客，紙上得來終覺淺，大家動(dòng)手多敲敲代碼！

方法一、props/$emit

父組件A通過props的方式向子組件B傳遞，B to A 通過在 B 組件中 $emit, A 組件中 v-on 的方式實(shí)現(xiàn)。

1.父組件向子組件傳值

接下來我們通過一個(gè)例子，說明父組件如何向子組件傳遞值：在子組件Users.vue中如何獲取父組件App.vue中的數(shù)據(jù)?users:["Henry","Bucky","Emily"]

//App.vue父組件?

? ? //前者自定義名稱便于子組件調(diào)用，后者要傳遞數(shù)據(jù)名?
import Users from"./components/Users"exportdefault {? name:'App',data(){return{? ? ? users:["Henry","Bucky","Emily"]? ? }? },? components:{"users":Users? }}

//users子組件?

? ?
    ? ? ?
  • {{user}}
    • //遍歷傳遞過來的值，然后呈現(xiàn)到頁面? ?
?
exportdefault {? name:'HelloWorld',? props:{? ? users:{? ? ? ? ? //這個(gè)就是父組件中子標(biāo)簽自定義名字type:Array,? ? ? required:true}? }}

總結(jié)：父組件通過props向下傳遞數(shù)據(jù)給子組件。注：組件中的數(shù)據(jù)共有三種形式：data、props、computed

2.子組件向父組件傳值（通過事件形式）

接下來我們通過一個(gè)例子，說明子組件如何向父組件傳遞值：當(dāng)我們點(diǎn)擊“Vue.js Demo”后，子組件向父組件傳遞值，文字由原來的“傳遞的是一個(gè)值”變成“子向父組件傳值”，實(shí)現(xiàn)子組件向父組件值的傳遞。

need-to-insert-img

// 子組件? ? ?

{{title}}

//綁定一個(gè)點(diǎn)擊事件? exportdefault {? name:'app-header',data() {return{? ? ? title:"Vue.js Demo"}? },? methods:{changeTitle() {? ? ? this.$emit("titleChanged","子向父組件傳值");//自定義事件? 傳遞值“子向父組件傳值”? ? }? }}

// 父組件?

? ? //與子組件titleChanged自定義事件保持一致? // updateTitle($event)接受傳遞過來的文字? ?

{{title}}

?
import Header from"./components/Header"exportdefault {? name:'App',data(){return{? ? ? title:"傳遞的是一個(gè)值"}? },? methods:{? ? updateTitle(e){? //聲明這個(gè)函數(shù)? ? ? this.title = e;? ? }? },? components:{"app-header":Header,? }}

總結(jié)：子組件通過events給父組件發(fā)送消息，實(shí)際上就是子組件把自己的數(shù)據(jù)發(fā)送到父組件。

方法二、$emit/$on

這種方法通過一個(gè)空的Vue實(shí)例作為中央事件總線（事件中心），用它來觸發(fā)事件和監(jiān)聽事件,巧妙而輕量地實(shí)現(xiàn)了任何組件間的通信，包括父子、兄弟、跨級(jí)。當(dāng)我們的項(xiàng)目比較大時(shí)，可以選擇更好的狀態(tài)管理解決方案vuex。

1.具體實(shí)現(xiàn)方式：

var Event=new Vue();? ? Event.$emit(事件名,數(shù)據(jù));? ? Event.$on(事件名,data => {});

2.舉個(gè)例子

假設(shè)兄弟組件有三個(gè)，分別是A、B、C組件，C組件如何獲取A或者B組件的數(shù)據(jù)

?
? ?

A組件：{{name}}

? ? 將數(shù)據(jù)發(fā)送給C組件?
?
? ?

B組件：{{age}}

? ? 將數(shù)組發(fā)送給C組件?
?
? ?

C組件：{{name}}，{{age}}

?
var Event = new Vue();//定義一個(gè)空的Vue實(shí)例var A = {template:'#a',data() {return{? ? name:'tom'}},methods: {send() {? ? Event.$emit('data-a', this.name);? }}}var B = {template:'#b',data() {return{? ? age: 20? }},methods: {send() {? ? Event.$emit('data-b', this.age);? }}}var C = {template:'#c',data() {return{? ? name:'',? ? age:""}},mounted() {//在模板編譯完成后執(zhí)行 Event.$on('data-a',name => {? ? this.name = name;//箭頭函數(shù)內(nèi)部不會(huì)產(chǎn)生新的this，這邊如果不用=>,this指代Event }) Event.$on('data-b',age => {? ? this.age = age; })}}var vm = new Vue({el:'#itany',components: {'my-a': A,'my-b': B,'my-c': C}});

need-to-insert-img

$on?監(jiān)聽了自定義事件 data-a和data-b，因?yàn)橛袝r(shí)不確定何時(shí)會(huì)觸發(fā)事件，一般會(huì)在 mounted 或 created 鉤子中來監(jiān)聽。

方法三、vuex

need-to-insert-img

1.簡(jiǎn)要介紹Vuex原理

Vuex實(shí)現(xiàn)了一個(gè)單向數(shù)據(jù)流，在全局擁有一個(gè)State存放數(shù)據(jù)，當(dāng)組件要更改State中的數(shù)據(jù)時(shí)，必須通過Mutation進(jìn)行，Mutation同時(shí)提供了訂閱者模式供外部插件調(diào)用獲取State數(shù)據(jù)的更新。而當(dāng)所有異步操作(常見于調(diào)用后端接口異步獲取更新數(shù)據(jù))或批量的同步操作需要走Action，但Action也是無法直接修改State的，還是需要通過Mutation來修改State的數(shù)據(jù)。最后，根據(jù)State的變化，渲染到視圖上。

2.簡(jiǎn)要介紹各模塊在流程中的功能：

Vue Components：Vue組件。HTML頁面上，負(fù)責(zé)接收用戶操作等交互行為，執(zhí)行dispatch方法觸發(fā)對(duì)應(yīng)action進(jìn)行回應(yīng)。

dispatch：操作行為觸發(fā)方法，是唯一能執(zhí)行action的方法。

actions：操作行為處理模塊,由組件中的$store.dispatch('action 名稱', data1)來觸發(fā)。然后由commit()來觸發(fā)mutation的調(diào)用 , 間接更新 state。負(fù)責(zé)處理Vue Components接收到的所有交互行為。包含同步/異步操作，支持多個(gè)同名方法，按照注冊(cè)的順序依次觸發(fā)。向后臺(tái)API請(qǐng)求的操作就在這個(gè)模塊中進(jìn)行，包括觸發(fā)其他action以及提交mutation的操作。該模塊提供了Promise的封裝，以支持action的鏈?zhǔn)接|發(fā)。

commit：狀態(tài)改變提交操作方法。對(duì)mutation進(jìn)行提交，是唯一能執(zhí)行mutation的方法。

mutations：狀態(tài)改變操作方法，由actions中的commit('mutation 名稱')來觸發(fā)。是Vuex修改state的唯一推薦方法。該方法只能進(jìn)行同步操作，且方法名只能全局唯一。操作之中會(huì)有一些hook暴露出來，以進(jìn)行state的監(jiān)控等。

state：頁面狀態(tài)管理容器對(duì)象。集中存儲(chǔ)Vue components中data對(duì)象的零散數(shù)據(jù)，全局唯一，以進(jìn)行統(tǒng)一的狀態(tài)管理。頁面顯示所需的數(shù)據(jù)從該對(duì)象中進(jìn)行讀取，利用Vue的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來進(jìn)行高效的狀態(tài)更新。

getters：state對(duì)象讀取方法。圖中沒有單獨(dú)列出該模塊，應(yīng)該被包含在了render中，Vue Components通過該方法讀取全局state對(duì)象。

3.Vuex與localStorage

vuex 是 vue 的狀態(tài)管理器，存儲(chǔ)的數(shù)據(jù)是響應(yīng)式的。但是并不會(huì)保存起來，刷新之后就回到了初始狀態(tài)，具體做法應(yīng)該在vuex里數(shù)據(jù)改變的時(shí)候把數(shù)據(jù)拷貝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的數(shù)據(jù)，取出來再替換store里的state。

letdefaultCity ="上海"try {? // 用戶關(guān)閉了本地存儲(chǔ)功能，此時(shí)在外層加個(gè)try...catchif(!defaultCity){? ? defaultCity = JSON.parse(window.localStorage.getItem('defaultCity'))? }}catch(e){}exportdefault new Vuex.Store({? state: {? ? city: defaultCity? },? mutations: {? ? changeCity(state, city) {? ? ? state.city = city? ? ? try {? ? ? window.localStorage.setItem('defaultCity', JSON.stringify(state.city));? ? ? // 數(shù)據(jù)改變的時(shí)候把數(shù)據(jù)拷貝一份保存到localStorage里面? ? ? } catch (e) {}? ? }? }})

這里需要注意的是：由于vuex里，我們保存的狀態(tài)，都是數(shù)組，而localStorage只支持字符串，所以需要用JSON轉(zhuǎn)換：

JSON.stringify(state.subscribeList);? // array -> stringJSON.parse(window.localStorage.getItem("subscribeList"));? ? // string -> array

方法四、$attrs/$listeners

1.簡(jiǎn)介

多級(jí)組件嵌套需要傳遞數(shù)據(jù)時(shí)，通常使用的方法是通過vuex。但如果僅僅是傳遞數(shù)據(jù)，而不做中間處理，使用 vuex 處理，未免有點(diǎn)大材小用。為此Vue2.4 版本提供了另一種方法----$attrs/$listeners

$attrs：包含了父作用域中不被 prop 所識(shí)別 (且獲取) 的特性綁定 (class 和 style 除外)。當(dāng)一個(gè)組件沒有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件。通常配合 inheritAttrs 選項(xiàng)一起使用。

$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件

接下來我們看個(gè)跨級(jí)通信的例子：

// index.vue?

? ?

浪里行舟

? ? ?
const childCom1 = () => import("./childCom1.vue");exportdefault {? components: { childCom1 },data() {return{? ? ? foo:"Javascript",? ? ? boo:"Html",? ? ? coo:"CSS",? ? ? doo:"Vue"};? }};

// childCom1.vue?

? ?

foo: {{ foo }}

? ?

childCom1的$attrs: {{$attrs}}

? ? ?
const childCom2 = () => import("./childCom2.vue");exportdefault {? components: {? ? childCom2? },? inheritAttrs:false, // 可以關(guān)閉自動(dòng)掛載到組件根元素上的沒有在props聲明的屬性? props: {? ? foo: String // foo作為props屬性綁定? },created() {? ? console.log(this.$attrs); // {"boo":"Html","coo":"CSS","doo":"Vue","title":"前端工匠"}? }};

// childCom2.vue?

? ?

boo: {{ boo }}

? ?

childCom2: {{$attrs}}

? ? ?
const childCom3 = () => import("./childCom3.vue");exportdefault {? components: {? ? childCom3? },? inheritAttrs:false,? props: {? ? boo: String? },created() {? ? console.log(this.$attrs); // {"boo":"Html","coo":"CSS","doo":"Vue","title":"前端工匠"}? }};

// childCom3.vue?

? ?

childCom3: {{$attrs}}

?
exportdefault {? props: {? ? coo: String,? ? title: String? }};

need-to-insert-img

如上圖所示$attrs表示沒有繼承數(shù)據(jù)的對(duì)象，格式為{屬性名：屬性值}。Vue2.4提供了$attrs?,?$listeners?來傳遞數(shù)據(jù)與事件，跨級(jí)組件之間的通訊變得更簡(jiǎn)單。

簡(jiǎn)單來說：$attrs與$listeners?是兩個(gè)對(duì)象，$attrs?里存放的是父組件中綁定的非 Props 屬性，$listeners里存放的是父組件中綁定的非原生事件。

方法五、provide/inject

1.簡(jiǎn)介

Vue2.2.0新增API,這對(duì)選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。一言而蔽之：祖先組件中通過provider來提供變量，然后在子孫組件中通過inject來注入變量。provide / inject API 主要解決了跨級(jí)組件間的通信問題，不過它的使用場(chǎng)景，主要是子組件獲取上級(jí)組件的狀態(tài)，跨級(jí)組件間建立了一種主動(dòng)提供與依賴注入的關(guān)系。

2.舉個(gè)例子

假設(shè)有兩個(gè)組件： A.vue 和 B.vue，B 是 A 的子組件

// A.vueexportdefault {? provide: {? ? name:'浪里行舟'}}

// B.vueexportdefault {? inject: ['name'],mounted() {? ? console.log(this.name);? // 浪里行舟? }}

可以看到，在 A.vue 里，我們?cè)O(shè)置了一個(gè)provide: name，值為 浪里行舟，它的作用就是將name這個(gè)變量提供給它的所有子組件。而在 B.vue 中，通過inject注入了從 A 組件中提供的name變量，那么在組件 B 中，就可以直接通過this.name訪問這個(gè)變量了，它的值也是 浪里行舟。這就是 provide / inject API 最核心的用法。

需要注意的是：provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而，如果你傳入了一個(gè)可監(jiān)聽的對(duì)象，那么其對(duì)象的屬性還是可響應(yīng)的----vue官方文檔 所以，上面 A.vue 的 name 如果改變了，B.vue 的?this.name?是不會(huì)改變的，仍然是 浪里行舟。

3.provide與inject 怎么實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式

一般來說，有兩種辦法：

provide祖先組件的實(shí)例，然后在子孫組件中注入依賴，這樣就可以在子孫組件中直接修改祖先組件的實(shí)例的屬性，不過這種方法有個(gè)缺點(diǎn)就是這個(gè)實(shí)例上掛載很多沒有必要的東西比如props，methods

使用2.6最新API Vue.observable 優(yōu)化響應(yīng)式 provide(推薦)

我們來看個(gè)例子：孫組件D、E和F獲取A組件傳遞過來的color值，并能實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式變化，即A組件的color變化后，組件D、E、F不會(huì)跟著變（核心代碼如下：）

need-to-insert-img

// A 組件

<div>

? ? ? <h1>A 組件</h1>

? ? ? <button @click="() => changeColor()">改變color</button>

? ? ? <ChildrenB />

? ? ? <ChildrenC />

</div>

......

? data() {

? ? return {

? ? ? color: "blue"

? ? };

? },

? // provide() {

? //? return {

? //? ? theme: {

? //? ? ? color: this.color //這種方式綁定的數(shù)據(jù)并不是可響應(yīng)的

? //? ? } // 即A組件的color變化后，組件D、E、F不會(huì)跟著變

? //? };

? // },

? provide() {

? ? return {

? ? ? theme: this//方法一：提供祖先組件的實(shí)例

? ? };

? },

? methods: {

? ? changeColor(color) {

? ? ? if (color) {

? ? ? ? this.color = color;

? ? ? } else {

? ? ? ? this.color = this.color === "blue" ? "red" : "blue";

? ? ? }

? ? }

? }

? // 方法二:使用2.6最新API Vue.observable 優(yōu)化響應(yīng)式 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 組件 ?

? ?

F 組件

?
exportdefault {? inject: {? ? theme: {? ? ? //函數(shù)式組件取值不一樣? ? ? default: () => ({})? ? }? }};

雖說provide 和 inject 主要為高階插件/組件庫(kù)提供用例，但如果你能在業(yè)務(wù)中熟練運(yùn)用，可以達(dá)到事半功倍的效果！

方法六、$parent?/?$children與?ref

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實(shí)例

$parent?/?$children：訪問父 / 子實(shí)例

需要注意的是：這兩種都是直接得到組件實(shí)例，使用后可以直接調(diào)用組件的方法或訪問數(shù)據(jù)。我們先來看個(gè)用?ref來訪問組件的例子：

// component-a子組件exportdefault {data() {return{? ? ? title:'Vue.js'}? },? methods: {sayHello() {? ? ? window.alert('Hello');? ? }? }}

// 父組件? exportdefault {mounted() {? ? ? const comA = this.$refs.comA;? ? ? console.log(comA.title);? // Vue.js? ? ? comA.sayHello();? // 彈窗? ? }? }

不過，這兩種方法的弊端是，無法在跨級(jí)或兄弟間通信。

// parent.vue

我們想在 component-a 中，訪問到引用它的頁面中（這里就是 parent.vue）的兩個(gè) component-b 組件，那這種情況下，就得配置額外的插件或工具了，比如 Vuex 和 Bus 的解決方案。

總結(jié)

常見使用場(chǎng)景可以分為三類：

父子通信： 父向子傳遞數(shù)據(jù)是通過 props，子向父是通過 events（$emit）；通過父鏈 / 子鏈也可以通信（$parent?/?$children）；ref 也可以訪問組件實(shí)例；provide / inject API；$attrs/$listeners

兄弟通信： Bus；Vuex

跨級(jí)通信： Bus；Vuex；provide / inject API、$attrs/$listeners

原文版權(quán)屬于原作者所有

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引...
    浪里行舟閱讀 8,763評(píng)論 0贊 49
  • 前言 組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引...
    Vicky丶Amor閱讀 6,122評(píng)論 10贊 162
  • 前言 組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引...
    7abbcd54a89d閱讀 766評(píng)論 0贊 1
  • 摘要： 總有一款合適的通信方式。 作者：浪里行舟 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。 前言 組件是 v...
    Fundebug閱讀 15,646評(píng)論 3贊 57
  • Vue組件的通信方式大致有這11（12）種 常用的Props $attrs & $listeners provid...
    zpkzpk閱讀 1,134評(píng)論 0贊 3

友情鏈接更多精彩內(nèi)容