$attrs和$listeners

发布时间 2023-10-30 21:10:55作者: 秃头大宝贝

用于场景:
放在中间组件中用于跨组件传递数据和方法,相当于把所有的属性和方法中转给下一级组件
\(attrs:用于向下传递数据变量 \)listeners:用于向下传递祖组件的方法
祖:A 父:B 孙:C
需要在B组件中使用\(attrs和\)listeners中转
例如:

//A: A中有个a属性和b属性和fun方法,传给了子组件B,selfAttr是A的自定义特性
<div>
	<B :a="a" :a="a" @fun="fun" selfAttr="myself"/>
</div>

//B:通过$attrs和$listeners将所有的属性和方法传承下去
//由于$attrs会将所有attr都继承下去,对于不需要的selfAttr可以在B组件中设置inheritAttrs: false,与data同级别
<div>
	<C v-bind="$attr" v-on="$listeners"/>
</div>
...
 inheritAttrs: true,
  mounted() {
    console.log('this.$attrs', this.$attrs)
  }

//C:可以通过B组件拿到祖父A组件的属性和调用方法,与父子传参一样
<div>
	{{}}
</div>
...
props:{
a:String,
b:String
}
//调用方法
this.$emit('fun')