$attrs和$listeners

可以用来做爷孙组件的传值；
爷组件：

<template>
    <div>
        1111
        <v-child1 :str1='str1' :str2='str2' v-on:changeStr1='changeStr1' @changeStr2='changeStr2'></v-child1>
    </div>
</template>
<script>
export default {
    data() {
        return{
            str1:'aaa',
            str2:'bbb'
        }
    },
    methods:{
        changeStr1() {
            this.str1 +='a'
        },
        changeStr2() {
            this.str2 +='b'
        }
    }
}
</script>

父组件：

<template>
    <div>
        22222
        <div>$attrs:{{$attrs}}</div>
        <div>$listeners:{{$listeners}}</div>
        <v-child2 v-bind="$attrs" v-on="$listeners"></v-child2>
    </div>
</template>
<script>
export default {
    inheritAttrs: false,
    data() {
        return{

        }
    },
    mounted() {
        console.log(this.$attrs,11111)//{str1: "aaa", str2: "bbb"} 11111
        console.log(this.$listeners,22222)//{changeStr1: ƒ, changeStr2: ƒ} 22222
    },
    methods:{

    }
}
</script>

孙组建：

<template>
    <div>
        33333
        <div>str1:{{str1}}</div>
         <div>$attrs:{{$attrs}}</div>
        <div>$listeners:{{$listeners}}</div>
        <el-button @click="btnMethod">点击</el-button>
    </div>
</template>
<script>
export default {
    inheritAttrs: false,
    data() {
        return{

        }
    },
    props:['str1'],
    mounted() {
        console.log(this.str1,3333)//aaa 3333
        console.log(this.$attrs,4444)//{str2: "bbb"} 4444
    },
    methods:{
        btnMethod() {
            this.$listeners.changeStr1();
        }
    }
}
</script>

效果图：

点击孙组建按钮效果图：

总结：孙组件可以获得爷组件的属性，通过$attrs获得包含除了被props接以外的全部属性（vue3.0已经废除$listeners，事件属性被放进了$attrs里边）