Vueにおける非親子コンポーネントの値伝達の問題
2643 ワード
非親子コンポーネント間の通信では、
1番目のコンポーネントのデータは2番目のコンポーネントに渡されます
共通インスタンスファイルbus.jsは、共通デジタル制御中央バスとして
最初のコンポーネントfirst.vue
2番目のコンポーネントvue
$emit
を使用して$on
のデータパラメータを取得し、コンポーネント通信を実現するには、共通のインスタンス(空でもよい)が必要です.1番目のコンポーネントのデータは2番目のコンポーネントに渡されます
共通インスタンスファイル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);
}
}
}
2番目のコンポーネントvue
import Bus from '../bus.js';
export default {
name: 'second',
mounted:function(){
Bus.$on('txt',function(val){// first txt
console.log(val);
});
}
}