Vue組件跨層級通信

正常組件間通信
　　父->子組件 是通過屬性傳遞
　　子->父組件 是通過this.$emit()傳遞
　　this.$emit()返回的是this,如果需要一些值 可使用callback方式傳遞

 

provide 和 inject

　　這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，
　　不論組件層次有多深，並在起上下游關系成立的時間里始終生效。
　　provide 和 inject 綁定並不是可響應的。這是刻意為之的。
　　然而，如果你傳入了一個可監聽的對象，那么其對象的屬性還是可響應的。

　　provide提供數據,多層子組件 向上層尋找,只要找到 就不在向上層尋找了.
　　inject 向子組件注入數據

使用方式

第一種方式(傳遞對象,使用字符串數組接收)

// 父級組件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}

// 子組件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}

 

第二種方式(傳遞返回對象的函數, 使用對象接收)

provide() {
return {
// 2.6.0 版本之前 通常傳遞this. 但這樣的話 會傳遞很多用不到的屬性
theme: {
color: 'xxx' //如果傳入可響應的數據,這里的屬性還是可響應的
}
};
}
inject: {
//這里可以換成其它名字
theme: {
from: "theme", // 數據來源
default: () => ({}) //降級情況下使用的 value
//可以是 普通值
//可以是 對非原始值使用一個工廠方法
}
}
//正常子組件
this.theme //即可訪問
//子組件是函數式組件的使用方式
injections.theme.color

 

Vue.observable( object )
讓一個對象可響應。Vue 內部會用它來處理 data 函數返回的對象。
可以作為最小化的跨組件狀態存儲器，用於簡單的場景

提供數據可改為

provide() {
//這時提供的theme 則為可響應的數據
this.theme = Vue.observable({
color: "blue"
});
return {
theme: this.theme
};
},