vue组件通信那些事儿

Posted 2020-10-17

一、父子组件间通信

1、父组件给子组件传消息

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

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

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

props:[‘ftoa‘]

2、子组件给父组件传事件

//子组件
<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();

1、子组件A给子组件B发事件

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

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

2、子组件B监听接收子组件A发的事件

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

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

三、前往代码

1、简单的组件通信（vue）

2、简单的组件通信（vue单文件组件）

3、复杂的组件通信（vue）

4、复杂的组件通信（vue单文件组件）