$attrs及$listeners属性使用场景

在进行组件通信时，经常会遇到这样的需求：
父组件A给子组件B传值，B组件又继续传递给C，最终执行的是C。
也就是说，B只是中间起了传递作用，啥也没干。
如果是这样的需求，按父子组件的通信的规则，B得接收信息，并继续传递，对B组件来说是冗余；而用vuex呢？那更是大材小用杀鸡用牛刀了。
那咋办呢？如何能快速达到目的、而且代码不拖沓？
$attrs和$listeners就派上了用场。
父组件Father.vue:

<template>
    <div>
        <my-input :mydata1="val1" :mydata2="val2"   @myfocus="focusme" @click="clickme"></my-input>
    </div>
</template>

<script>
    import myInput from "../components/others/myInput";
    export default {
        name: "Father",
        components:{
            myInput:myInput
        },
        data(){
            return {
                val1:'default value',
                val2:'hello'
            }
        },
        methods:{
            focusme(){
                console.log('获取焦点')
            },
            clickme(){
                console.log('点击事件')
            },
        }
    }
</script>

<style scoped>

</style>

子组件myInput.vue:

<template>
    <div>

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

<script>
    import subChild from './subChild'
    export default {
        name: "myInput",
        components:{subChild:subChild},
        mounted(){
            console.log(this.$attrs)
            console.log(this.$listeners)
        }
    }
</script>

<style scoped>

</style>

孙子组件subChild.vue:

<template>
    <div>
        <input type="text" v-model="$attrs.mydata1"  @focus="$listeners.myfocus"/>
    </div>
</template>

<script>
    export default {
        name: "subChild",
        mounted(){
            console.log('subChild event>>>',this.$listeners)
            console.log('subChild prop>>>',this.$attrs)
        },
        methods:{

        }
    }
</script>

<style scoped>

</style>

最终执行的是subChild.vue。