Vueにおける非親子コンポーネントの値伝達の問題

2643 ワード

非親子コンポーネント間の通信では、$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);
    });
  }
}