Vue中非父子組件傳值的問題
阿新 • • 發佈:2018-07-10
msg export function port exp vue組件 his mit func
父子組件傳值的問題,前面已經講過,不再敘述,這裏來說一種非父子組件的傳值。
vue官網指出,可以使用一個空vue實例作為事件中央線!
也就是說 非父子組件之間的通信,必須要有公共的實例(可以是空的),才能使用 $emit
獲取 $on
的數據參數,實現組件通信
這裏舉個例子來說明一下。
公共實例文件bus.js,作為公共數控中央總線
import Vue from "vue";
export default new Vue();
第一個組件 first.vue
import Bus from ‘../bus.js‘;
export default {
name: ‘first‘,
data () {
return {
value: ‘我來自first.vue組件!‘
}
},
methods:{
add(){// 定義add方法,並將msg通過txt傳給second組件
Bus.$emit(‘txt‘,this.value);
}
}
}
第二個組件second.vue
import Bus from ‘../bus.js‘;
export default {
name: ‘second‘,
data () {
return {
}
},
mounted:function(){
Bus.$on( ‘txt‘,function(val){//監聽first組件的txt事件
console.log(val);
});
}
}
這樣,就可以在第二個非父子關系的組件中,通過第三者bus.js來獲取到第一個組件的value。
嗯,就醬~
Vue中非父子組件傳值的問題