vue中的$attrs和$listeners

在组件多级嵌套的情况下，相互间的传值是这样的呢 ？

A组件（父组件）➡️B组件（子组件）➡️C组件（孙组件）

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

在vue2.4中，为了解决该需求，引入了$attrs和$listeners， 新增了inheritAttrs 选项。

1.$attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

// 父组件A 代码如下
<template>
   <div>
     <child-b
      :name="name"
      :sex="sex"
     >
     </child-b>
   </div>
</template>
<script>
   import childB from "./ChildB.vue";
   export default {
    name: 'parA',
     data() {
        return {
          name:"zhudying",
          sex:"男"
        }
     },
     components:{childB },
   }
</script>

// 子组件B 代码如下
<template>
   <div>
    <div>{{name}}</div>
    <div>{{$attrs.sex}}</div>
    <!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） --> 
     <child-c v-bind="$attrs" v-on="$listeners">  </child-c>
   </div>
</template>
<script>
   import childC from "./ChildC.vue";
   export default {
     name: 'childB',
     props:{
       name:''  //props中定义了接收name，因此$attrs中就不存在name属性了
     },
     data() {
        return { }
     },
     components:{childC },
   }
</script>

// 孙组件C 代码如下
<template>
   <div>
      <p>sex:{{$attrs.sex}}</p>
   </div>
</template>
<script>
export default {
 name:'childC'
}
</script>

2.$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

// 父组件 A

<template>
    <div>
        <Child-b v-on:test1="onTest1" v-on:test2="onTest2"></Child-b>
    </div>
</template>
<script>
import Childb from './child-b';
export default {
    data() {
        return { };
    },
    components: { Childb },
    methods: {
         // child-b 传回来的数据
        onTest1(msg) {
            console.log('test1',msg);
        },

        // child-c 传回来的数据
        onTest2(msg) {
            console.log('test2',msg);
        }
    }
};
</script>

// 子组件B
<template>
    <div class="child-b">
        <!-- Child-c组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
        <Child-c  v-on="$listeners"></Child-c>
    </div>
</template>
<script>
import Childc from './child-c';
export default {
    data() {
        return {};
    },
    components: { Childc },
    mounted() {
        this.$emit('test1','嘻嘻');
    }
};
</script>

//孙组件C
<template>
    <div class="child-c"></div>
</template>
<script>
export default {
    data() {
        return {};
    },
    mounted() {
        this.$emit('test2','哈哈');
    }
};
</script>

参考来源：https://www.jianshu.com/p/f7fa47499b39