vue组件通信那些事儿

//父组件，给子组件的props值赋值
<com-a ftoa="一朵花"></com-a>

Vue.component(‘com-a‘,{
   //全局注册子组件A
})

//子组件
<h3>父亲给我了，{{ ftoa }}</h3>

props:[‘ftoa‘]

//子组件
<input type="button" value="A和父亲说话" @click="eventAf">

methods:{
    eventAf(){
      this.$emit(‘a-f-msg‘,this.a);
    }
  }

//父组件，用v-on监听子组件
<com-a v-on:a-f-msg="listenToa"></com-a>
<h3>子组件A想告诉父亲，{{ tofather.aword }}</h3>

methods:{
    listenToa(adata){
      this.tofather.aword = adata;
    }
  }

//事件总线
const bus= new Vue();

//子组件A
<input type="button" value="把值传给B" @click="eventAb">

methods:{
    eventAb(){
      bus.$emit(‘a-b-msg‘,this.a);
    }
  }

//子组件B
<h4>A传过来的数据是：{{ a }}</h4>

mounted(){
    var _this = this;
    bus.$on(‘a-b-msg‘,(a)=>{
      _this.a = a;
    });
  }