1.EventBus

事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件。主要用于组件之间的传值，例如：父子传值，兄弟传值，隔代传值。

用法：

第一步：在main.js中全局初始化EventBus

Vue.prototype.$EventBus = new Vue()

第二步：在A组件中向EventBus发送事件

this.$EventBus.$emit("msg", '123');

第三步：在B组件中接收事件

 mounted() {
    this.$EventBus.$on("msg", (data) => {
      this.msg = data;
    });
 }

第四步：移除监听

上述三步中A组件向B组件进行传递了数据，但当离开B组件再次进入B组件时，时间总线里就有多个监听，会导致事件只触发了一次，但监听事件中的回调函数执行了很多次，所以在组件离开前，也就是被销毁前，需要将该监听事件给移除，以免下次再重复创建监听。

beforeDestroy(){
    //移除监听事件"msg"
    this.$EventBus.$off("msg")
}

2.v-bind=“$attrs”

主要用于组件之间的隔代传值。例如有父组件A，子组件B，孙组件C 三个组件。
在A组件中传值给C，可直接在B中的C上设置v-bind="$attrs"，然后在C组件中用prop接收，此时就直接把值传给了C。

用法如下：

组件A

<template>
  <bCom msg='123'/>
</template>

组件B

<template>
  <cCom v-bind="$attrs"/>
</template>

组件C

<template>
  <div>A传递过来的值:{
   
   {msg}}</div>
</template>
 
<script>
export default {
  name: 'cCom',
  props: {
    msg:{ //接收A传递的msg
      typeof:String,
      default:''
    }
  },
}
</script>

3.v-bind=“$listeners”

用于底层组件向高级层组件传递信息。

例如有父组件A，子组件B，孙组件C 三个组件，如果C传递信息给B则可直接使用$emit，如果是C向A传递信息还使用$emit,则就需要C先$emit给B，B再$emit给A，这种方式比较繁琐，则此时可以使用v-on="$listeners"来满足当前需求。

用例：

C组件

<template>
  <div @click="onClick">C组件</div>
</template>
 
onClick(){
  this.$emit("Msg",'123')
}

B组件

<template>
  <cCom v-on="$listeners"/>
</template>

A组件

<template>
  <bCom @Msg='Msg'/>
</template>
 
methods:{
  Msg(val){
    console.log(val) //123
  }
}

总结：

1.高层级及向低层级传值用v-bind="$attrs"

2.低层级向高层及传值用v-on="$listeners"

3.v-bind="$attrs"和v-on="$listeners"都是写在中间层组件中

vue2中的组件通讯

1.EventBus

2.v-bind=“$attrs”

3.v-bind=“$listeners”

猜你喜欢