vue $attrs与$listeners

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

A 根组件
B 子组件
C 孙组件
...

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

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

1. $attrs的使用

继承所有的父组件属性（除了prop传递的属性、class 和 style ）

注：使用 $attrs 时，所接收的值是不包含props里面值的。如下例，name与sex都用props接受，$attrs 接收的值将为 空，props 只接收name时，$attrs 只会有sex

// 父组件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>

// 子组件child-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"]
     data() {
        return { }
     },
     components:{childC },
   }
</script>

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

2. $listeners的使用

包含了父作用域中的 v-on 或 @ 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

注：使用 $listeners时，不包含不含 .native 修饰器的。

// 父组件 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>