在进行组件通信时，经常会遇到这样的需求：
父组件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。
demo.png
