vue中的组件通信

一、组件通信（组件传值）

1.1父子组件通信

父组件
<子组件标签 :变量='要传递的数据'></子组件标签>
子组件
props：['变量']

1.2子父组件通信

父组件
<子组件标签 @自定义事件='事件名'></子组件标签>
methods:{
  事件名(e){
    //e就是传递过来的数据
  }
}
子组件
子组件中要有一个触发事件
<button @click='toFather'></button>
methods:{
  toFather(){
    this.$emit('自定义事件名称','要传递的数据')
  }
}

1.3非父子组件通信（兄弟组件通信）

定义一个中央事件总线（中转站）
let EventBus = new Vue() 
兄弟A中
created(){}
或者
mounted(){
  EventBus.$on('暗号',(d)=>{
    //d就是传递过来的数据
  })
}
兄弟b中
兄弟b中要有一个触发事件
<button @click='toFather'></button>
methods:{
  toFather(){
    EventBus.$emit('暗号','要传递的数据')
  }
}