可以用来做爷孙组件的传值;
爷组件:
<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>
效果图:
点击孙组建按钮效果图:
总结:孙组件可以获得爷组件的属性,通过
a
t
t
r
s
获
得
包
含
除
了
被
p
r
o
p
s
接
以
外
的
全
部
属
性
(
v
u
e
3.0
已
经
废
除
attrs获得包含除了被props接以外的全部属性(vue3.0已经废除
attrs获得包含除了被props接以外的全部属性(vue3.0已经废除listeners,事件属性被放进了$attrs里边)