vue $attrs 和 $listeners 用法( 优化 组件中间层 )

直接上代码

parent.vue

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

<script>
    import child from './child.vue'
    export default {
        components: {
          child
        },
        methods: {
            change() {
                alert("孙组件传出来的时间")
            }
        },
    }
</script>

中间层 直接使用 $attrs 和 $listeners 属性

child.vue

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

<script>
    import grandChild from './grandChild.vue'
    export default {
       components: {
          grandChild
       },
       inheritAttrs :false  //这个要查一下为什么加
    }
</script>

inheritAttrs

默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML特性应用在子组件的根元素上。

当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。

通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。

而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，

且可以通过 v-bind 显性的绑定到非根元素上。

上述特性的使用完全可以降低在不使用Vuex以及事件总线的情况下，
组件跨级props以及事件传递的复杂度。

组件

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>