v-bind="$attrs"
主要用于組件之間的隔代傳值。例如有 父組件A，子組件B，孫組件C 三個組件。
A組件中的值需要直接傳給C，那么就需要在B中設(shè)置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"來滿足當(dāng)前需求。
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
}
}
-
總結(jié)：
1、這可以理解成穿透，多層組件監(jiān)聽
2、用于多層級組件之間的通信
3、高層級向底層級傳值 v-bind="$attrs"
4、低層級向高層級傳值 v-on="$listeners"
