詳解Vue2中組件間通信的解決全方案

前言

在Vue中組件是實(shí)現(xiàn)模塊化開發(fā)的主要內(nèi)容，而組件的通信更是vue數(shù)據(jù)驅(qū)動的靈魂，下面這篇文章將給大家介紹關(guān)于Vue2組件間通信的相關(guān)內(nèi)容，下面話不多說，來一起看看詳細(xì)的介紹。

組件通訊包括：父子組件間的通信和兄弟組件間的通信。在組件化系統(tǒng)構(gòu)建中，組件間通信必不可少的。

父組件--> 子組件

1. 屬性設(shè)置

父組件關(guān)鍵代碼如下：

<template>
 <Child :child-msg="msg"></Child>
</template>

子組件關(guān)鍵代碼如下：

export default {
 name: 'child',
 props: {
 child-msg: String
 }
};

child-msg 為父組件給子組件設(shè)置的額外屬性值，屬性值需在子組件中設(shè)置props，子組件中可直接使用child-msg變量。

2. 子組件調(diào)用父組件

子組件通過 $parent 獲得父組件，通過 $root 獲得最上層的組件。

子組件--> 父組件

1. 發(fā)送事件/監(jiān)聽事件

子組件中某函數(shù)內(nèi)發(fā)送事件：

this.$emit('toparentevent', 'data');

父組件監(jiān)聽事件：

<Child :msg="msg" @toparentevent="todo()"></Child>

toparentevent 為子組件自定義發(fā)送事件名稱，父組件中@toparentevent為監(jiān)聽事件，todo為父組件處理方法。

2. 父組件直接獲取子組件屬性或方法

給要調(diào)用的子組件起個(gè)名字。將名字設(shè)置為子組件 ref 屬性的值。

<!-- 子組件。 ref的值是組件引用的名稱 -->
<child-component ref="aName"></child-component>

父組件中通過 $refs.組件名 來獲得子組件，也就可以調(diào)用子組件的屬性和方法了。

var child = this.$refs.aName
child.屬性
child.方法()

父組件通過 $children 可以獲得所有直接子組件（父組件的子組件的子組件不是直接子組件）。需要注意 $children 并不保證順序，也不是響應(yīng)式的。

Bus中央通信

目前中央通信是解決兄弟間通信，祖父祖孫間通信的最佳方法，不僅限于此，也可以解決父組件子組件間的相互通信。如下圖：

各組件可自己定義好組件內(nèi)接收外部組件的消息事件即可，不用理會是哪個(gè)組件發(fā)過來；而對于發(fā)送事件的組件，亦不用理會這個(gè)事件到底怎么發(fā)送給我需要發(fā)送的組件。

先設(shè)置Bus

//bus.js 
import Vue from 'vue'
export default new Vue();

組件內(nèi)監(jiān)聽事件：

import bus from '@/bus';

export default {
 name: 'childa',
 methods: {
 },
 created() {
 bus.$on('childa-message', function(data) {
 console.log('I get it');
 });
 }
};

發(fā)送事件的組件：

import bus from '@/bus';
//方法內(nèi)執(zhí)行下面動作
bus.$emit('childa-message', this.data);

Bus中央通信的方案各種情況下都可用，比較方便，具體內(nèi)在原理后續(xù)更新說明。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者使用vue能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。