v-bind="$attrs"
主要用于组件之间的隔代传值。例如有 父组件A，子组件B，孙组件C 三个组件。
A组件中的值需要直接传给C，那么就需要在B中设置v-bind="$attrs"，然后在C组件中用prop接收，此时就直接把值传给了C组件。
父组件A
<template>
<B_zujian msg='123'/>
</template>
子组件B
<template>
<C_zujian v-bind="$attrs"/>
</template>
孙组件C
<template>
<div>A传递过来的值:{{msg}}</div>
</template>
<script>
export default {
name: 'c_zujian',
props: {
msg:{ //接收A组件传递的值 msg
typeof:String,
default:''
}
},
}
</script>
v-on="$listeners"
主要用于底层组件向高层组件传递信息。
如有 父组件A，子组件B，孙组件C 三个组件，如果C传递信息给B则可直接使用emit,则就需要C先
emit给A，这种方式比较麻烦。
此时可以使用v-on="$listeners"来满足当前需求。
C组件
<template>
<div @click="hanleClick">C组件</div>
</template>
hanleClick(){
this.$emit("transmitNews",'123')
}
B组件
<template>
<c_zujian v-on="$listeners"/>
</template>
A组件
<template>
<b_zujian @transmitNews='jieShouTransmitNews'/>
</template>
methods:{
jieShouTransmitNews(val){
console.log(val) //123
}
}
-
总结：
1、这可以理解成穿透，多层组件监听
2、用于多层级组件之间的通信
3、高层级向底层级传值 v-bind="$attrs"
4、低层级向高层级传值 v-on="$listeners"
