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(val){
            this.name = val;
        }
    },
}

//儿子组件
<template >
    <div>
        儿子组件
        <GrandSon v-bind='$attrs' v-on="$listeners"></GrandSon>//属性通过v-bind进行传递
    </div>                                                      //方法可通过v-on进行传递   
</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的值。