Vue祖孙组件之间的通信---------$attrs、$listeners详解

$attrs

• 功能：实现当前组件的父组件向当前组件的子组件通信
• 说明：$attrs是一个对象，包含了当前组件的父组件传递给当前组件的所有的属性绑定 (当前组件props声明的属性除外、父组件上绑定的class 和 style 除外)
• 编码

//parent.vue  当前组件的父组件
<SonComponent   class="box" text="1组件" ></SonComponent>     

//son.vue   当前组件
<GrandSonComponent v-bind="$attrs" ></GrandSonComponent>  // $attrs = ｛text:'1组件'｝

//grandson.vue  当前组件的子组件
<p>{{$attrs.text}}</p>

$listeners

• 功能：实现当前组件的子组件向当前组件的父组件通信

• 说明：$listeners是一个对象，包含了当前组件的父组件传入的自定义事件监听名与对应回调函数的对象

• 编码

//parent.vue  当前组件的父组件
<SonComponent   @say="alert(1)" ></SonComponent>     

//son.vue   当前组件
<GrandSonComponent v-on="$listeners" ></GrandSonComponent>  // $attrs = ｛text:'1组件'｝

//grandson.vue  当前组件的子组件
<p @click="$listeners.say"> 当前组件的子组件</p>

注意事项：

在当前组件中访问$listeners与$attrs，与在当前组件的子组件中访问$listeners与$attrs，其结果不同。

当前组件中访问$listeners与$attrs,只包含父组件给当前组件所绑定的自定义事件和属性。

当前组件的子组件中访问$listeners与$attrs，不仅包含父组件给当前组件所绑定的自定义事件和属性，也包含当前组件给子组件所绑定的自定义事件和属性，是二者对象合并后的结果。

编码

当前组件的父组件 （组件1）

<template>
    <div id="parent">
        <h4>父组件</h4>
        <hr/>
        <SonComponent  id="child" data='123' :origin="origin" @say="say" @add="add"></SonComponent>  
    </div>
</template>

<script>
import SonComponent from '../components/son3.vue'
export default {
    data(){
        return {
           origin:''
        }
    },
    methods:{
        say(){
           alert('hellow!')
        },
        add(){
           alert('加1');
        }
    },
    components:{
      SonComponent
    }
}

</script>

当前组件**（组件2）**

<template>
    <div id="son3">
        <h4>子组件-{{name}}</h4>
        <p style="color:red">
            注意：$attrs、$listeners 是vue2.4.0 新增<br/>
            用于当前组件的父组件与当前组件的子组件之间通信  
        </p>
        <hr/>
        <GrandSonComponent v-bind="$attrs" status=1  v-on="$listeners" @updateName="this.name=$event"></GrandSonComponent>
    </div>
</template>

<script>
import GrandSonComponent from './grandSon'
export default {
    props:{
       origin:''
    },
    data(){
        return {
           name:''
        }
    },
    components:{
      GrandSonComponent
    },
    mounted(){
        console.log(this.$attrs);
        console.log(this.$listeners);
    }
}

</script>

打印结果如下

当前组件的子组件 （组件3）

<template>
    <div id="son3">
        <h4>孙组件</h4>
        <p @click="$listeners.say">点击它触发祖组件的say事件</p>
        <p @click="$listeners.add">点击它触发祖组件的add事件</p>
    </div>
</template>

<script>
export default {
    data(){
        return {

        }
    },
    mounted(){
    // 包含了组件1与组件2的所绑定的属性与自定义的方法
        console.log(this.$attrs);
        console.log(this.$listeners);
    }
}

</script>

打印结果如下

参考链接：https://cn.vuejs.org/v2/api/#vm-listeners