1. 父子組件通信
盡管我們可以使用
1??this.$parent訪問父組件實例
2??this.$children訪問所有的子組件實例
3??this.$root組件所在的根實例
但這在vue中是不建議直接子組件操作父組件的數(shù)據(jù)的，或者父組件操作子組件的參數(shù)。
- 父傳子： 通過props
- 子傳父：這時候我們可以通過觸發(fā)事件來通知父組件改變數(shù)據(jù)，從而達到改變子組件數(shù)據(jù)的目的。
官網(wǎng)通信說明圖
父組件代碼
//parent.html子組件的引入
<v-test :title="testTitle" @changeTitle="changes"></v-test>
////監(jiān)聽子組件觸發(fā)的changeTitle事件,然后調(diào)用changes方法
//parent.vue
import test from XXX;
export default {
components: {
vTest: test
},
data (){
return {
testTitle: "我是子組件標題名稱"
}
},
methods: {
changes (msg) {
this.testTitle = msg;
}
}
}
子組件代碼
child.html
<template>
<div> {{title}}</div>
<button @click="changeInfo"></button>
</template>
export default {
props: {
title: {
default: ""
}
},
methods: {
changeInfo () {
////主動觸發(fā)changeTitle方法，'hehe'為向父組件傳遞的數(shù)據(jù)
this.$emit("changeTitle","我是新的title");
}
}
}
2. 兄弟組件通信
如果2個組件不是父子組件那么如何通信呢？這時可以通過eventHub來實現(xiàn)通信。
所謂eventHub就是創(chuàng)建一個事件中心，相當于中轉(zhuǎn)站，可以用它來傳遞事件和接收事件。
let bus = new Vue(); //創(chuàng)建事件中心
// 觸發(fā)組件 A 中的事件
bus.$emit('id-selected', 1)
// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件
bus.$on('id-selected', function (id) {
// ...
})
如果業(yè)務涉及很多的組件通信，推薦使用Vuex。
什么情況下我應該使用 Vuex？
雖然 Vuex 可以幫助我們管理共享狀態(tài)，但也附帶了更多的概念和框架。這需要對短期和長期效益進行權(quán)衡。
如果您不打算開發(fā)大型單頁應用，使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。但是，如果您需要構(gòu)建是一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會成為自然而然的選擇。
