vue 中 $attrs 和 $listeners的使用

　　$sttrs 和$listeners在创建多层级组件中有用

　　先上概念

　　$attrs

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

 

　　$listeners

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

　　

　　概念抽象没关系，直接上代码

 

　　parent.vue

<template>
    <div>
        <child 
            name="名字"
            @change="change"></child>
    </div>
</template>

<script>
    export default {
        methods: {
            change() {
                alert("孙组件传出来的时间")
            }
        },
    }
</script>

 

　　child.vue

<template>
    <div>
        <grand-child 
             v-on="$attrs" 
            v-bind="$listeners"></grand-child>
    </div>
</template>

<script>
　　

    export default {
       inheritAttrs :false, //这个要查一下为什么加
    }
</script>

　　child.vue这个组件 不需要接受 name这个值 和 change这个方法，但是中间这一层有其他的作用，不可或缺，这时用到 $attrs和$listeners就非常方便,

　　

 

　　grandChild.vue

<template>
    <div>
        名字：{{name}}
        <div @click="btn">
            点击事件
        </div>
    </div>
</template>

<script>
    export default {
       props: {
           name: {
               type: String,
               default: ''
           },
       },
       methods: {
           btn() {
               this.$emit('change')
           }
       },
    }
</script>