17. Vue2.4+新增属性$listeners

现在我们来讨论一种情况，A组件与C组件怎么通信，我们有多少种解决方案？

1. 我们使用VueX来进行数据管理，但是如果项目中多个组件共享状态比较少，项目比较小，并且全局状态比较少,那使用VueX来实现该功能，并没有发挥出VueX的威力。
2. 使用B来做中转站，当A组件需要把信息传给C组件时，B接受A组件的信息，然后利用属性传给C组件，这是一种解决方案，但是如果嵌套的组件过多，会导致代码繁琐，代码维护比较困难;如果C中状态的改变需要传递给A, 使用事件系统一级级往上传递 。本来
3. 自定义一个Vue 中央数据总线，这个情况适合碰到组件跨级传递消息，但是使用VueX感觉又有点浪费的项目中，但是缺点是，碰到多人合作时，代码的维护性较低，代码可读性低

在很多开发情况下，我们只是想把A组件的信息传递给C组件，如果使用props 绑定来进行信息的传递，虽然能够实现，但是代码并不美观。

在vue2.4中，为了解决该需求，引入了$attrs 和$listeners ， 新增了inheritAttrs 选项。 在版本2.4以前，默认情况下父作用域的不被认作props的属性属性百年孤独，将会“回退”且作为普通的HTML特性应用在子组件的根元素上。可参考上篇文章。

此时我们又想到了一个问题，c组件的信息，怎么同步给a组件呢？ 

vue2.4版本新增了$listeners 属性，我们在b组件上 绑定 v-on=”$listeners”, 在a组件中，监听c组件触发的事件。就能把c组件发出的数据，传递给a组件。

A组件

<template>
 <div>
   <child-dom
    :foo="foo"
    :coo="coo"
     v-on:upRocket="reciveRocket"
   >
   </child-dom>
 </div>
</template>
<script>
 import childDom from "./parent";
 export default {
   name:'demoNo',
   data() {
     return {
        foo:"Hello, foo",
        coo:"Hello, coo"
    }
  },
 components:{childDom},
 methods:{
   reciveRocket(){
      console.log("reciveRocket success")
   }
 }
}
</script>

B组件

<template>
    <div>
        <p>foo:{{foo}}</p>
        <p>attrs:{{$attrs}}</p>
        <child-dom-child v-bind="$attrs" v-on="$listeners"></child-dom-child>
    </div>
</template>
<script>
import childDomChild from './child';
export default {
    components:{childDomChild},
    name:'child-dom',
    props:["foo"],
    inheritAttrs:false,
}
</script>

C组件

<template> 
    <div>
        <p>coo:{{coo}}</p>
        <button @click="startUpRocket">我要发射火箭</button>
    </div>
</template>
<script>
 export default {
    name:'childDomChild',
    props:['coo'],
    methods:{
        startUpRocket(){
            this.$emit("upRocket");
            console.log("startUpRocket")
        }
    }
 }
</script>

通过$listeners 就可以实现C组件同步A组件。

 

参考：https://blog.csdn.net/songxiugongwang/article/details/84001967

转载于:https://www.cnblogs.com/shix0909/p/11217865.html