詳解Vue2中組件間通信的解決全方案
前言
在Vue中組件是實現(xiàn)模塊化開發(fā)的主要內(nèi)容，而組件的通信更是vue數(shù)據(jù)驅(qū)動的靈魂，下面這篇文章將給大家介紹關(guān)于Vue2組件間通信的相關(guān)內(nèi)容，下面話不多說，來一起看看詳細的介紹。
組件通訊包括：父子組件間的通信和兄弟組件間的通信。在組件化系統(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)用的子組件起個名字。將名字設(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)接收外部組件的消息事件即可，不用理會是哪個組件發(fā)過來；而對于發(fā)送事件的組件，亦不用理會這個事件到底怎么發(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)容對大家的學習或者使用vue能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
Pure admin-Router標簽頁配置與頁面持久化實現(xiàn)方法詳解
這篇文章主要介紹了Pure admin-Router標簽頁配置與頁面持久化實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-01-01
詳解vue數(shù)據(jù)響應(yīng)式原理之數(shù)組
這篇文章主要為大家詳細介紹了vue數(shù)據(jù)響應(yīng)式原理之數(shù)組，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Element中el-tabs左右滑動動畫的實現(xiàn)
本篇博客將詳細介紹如何在使用 Vue 以及 Element UI 時,實現(xiàn)一個具有左右滑動效果的 tab 切換動畫,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2024-03-03
學過?vue2?的寶子們應(yīng)該都清楚，計算屬性這個東西在項目開發(fā)過程中使用的還是比較頻繁的，使用頻率相對來說比較高。本文就來為大家介紹一下Vue3中計算屬性的用法，需要的可以參考一下2022-07-07
Vue.js是一套構(gòu)建用戶界面的框架,只關(guān)注視圖層,它不僅易于上手,還便于與第三方庫或既有項目整合,下面這篇文章主要給大家介紹了關(guān)于使用idea創(chuàng)建vue項目的相關(guān)資料,需要的朋友可以參考下2022-08-08
Vue使用moment將GMT時間轉(zhuǎn)換為北京時間
GMT（Greenwich Mean Time）和UTC（Coordinated Universal Time）是兩個時間標準,它們在許多方面非常相似,但也有一些微小的差異,本文給大家詳細介紹了Vue使用moment將GMT時間轉(zhuǎn)換為北京時間,需要的朋友可以參考下2023-12-12
Vue3+TypeScript實現(xiàn)遞歸菜單組件的完整實例
Vue.js中的遞歸組件是一個可以調(diào)用自己的組件,遞歸組件一般用于博客上顯示評論,形菜單或者嵌套菜單,文章主要給大家介紹了關(guān)于Vue3+TypeScript實現(xiàn)遞歸菜單組件的相關(guān)資料,需要的朋友可以參考下2021-08-08
解決vuex數(shù)據(jù)異步造成初始化的時候沒值報錯問題
今天小編大家分享一篇解決vuex數(shù)據(jù)異步造成初始化的時候沒值報錯問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細介紹了vue2實現(xiàn)手勢密碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本篇文章主要介紹了詳解vue2.0腳手架的webpack 配置文件分析，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05