快捷導(dǎo)航

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

更新時(shí)間：2017年07月28日 08:51:11 作者：Kevin

Vue中組件這個(gè)特性讓不少前端er非常喜歡，我自己也是其中之一，它讓前端的組件式開發(fā)更加合理和簡(jiǎn)單。下面這篇文章主要給大家介紹了關(guān)于Vue2中組件間通信的解決全方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。

前言

在Vue中組件是實(shí)現(xiàn)模塊化開發(fā)的主要內(nèi)容，而組件的通信更是vue數(shù)據(jù)驅(qū)動(dòng)的靈魂，下面這篇文章將給大家介紹關(guān)于Vue2組件間通信的相關(guān)內(nèi)容，下面話不多說(shuō)，來(lá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)用父組件

子組件通過(guò) $parent 獲得父組件，通過(guò) $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>

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

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

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

Bus中央通信

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

各組件可自己定義好組件內(nèi)接收外部組件的消息事件即可，不用理會(huì)是哪個(gè)組件發(fā)過(guò)來(lái)；而對(duì)于發(fā)送事件的組件，亦不用理會(huì)這個(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í)行下面動(dòng)作
bus.$emit('childa-message', this.data);

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

總結(jié)

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

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具