[JavaScript知识库]vue组件使用$listeners和$attrs隔代传参

1.传递属性$attrs

说明： $attrs只代表的是那些没有被声明为props的属性，如果某个prop被子组件中声明了（就是这个属性已经在子组件的props中了），在子组件中的$attrs就会把声明的prop剔除。
2.传递方法
$listeners包含了父作用域中的(不含.native修饰器的)v?on事件监听器。它可以通过v?on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

三个组件：分别是:
parent.vue
son.vue
grandson.vue

// 父组件
 <template lang="">
    <div>
        父组件
        <Son :name="name"  @change='change'></Son>
    </div>
</template>
<script>
  import Son from './son.vue'
export default {
    data(){
        return{
        name:"周冬雨"
        }
    },
    components:{
        Son
    },
    methods: {
        change(){
            this.name = "马冬梅";
        }
    },
}

//儿子组件
<template >
    <div>
        儿子组件
        <GrandSon v-bind='$attrs'></GrandSon>//通过v-bin进行传递
    </div>
</template>
<script>
import GrandSon from './grandson'
export default {
    components:{
        GrandSon
    }
}
</script>

</script>


//孙子组件
<template >
    <div>
        孙子组件
        姓名：{{$attrs.name}}
         <button @click='handleClick'>改变</button>
    </div>
</template>
<script>
export default {
 methods: {
        handleClick(){
            this.$listeners.change();
        }
    },
}
</script>

页面显示：
1.最终在孙子组件中获取到了他爷爷的值

2.通过$listeners孙子组件也可以获取到他爷爷的方法。点击按钮效果如下，直接调用了爷爷的change方法，修改了name的值。