vue关于$attrs,$listeners,inheritAttrs的使用与想法

attrs,listeners,inheritAttrs一般用在父子组件传递中。

$attrs
当父组件传递给子组件的参数,子组件没有接受到的一部分(既没有props),那么子组件内就可以使用 $attrs 代表剩余部分的属性,子组件也可以通过 v-bind="$attrs" 传递给自己的子组件(既父组件的子组件的子组件)

$listeners
$listeners 代表给父组件传递给子组件的函数,父组件传递给子组件函数,子组件可以通过 v-on="$listeners" 传递给自己的子组件(既父组件的子组件的子组件),那么子组件的子组件就可以调用父组件内传递给子组件使用的方法

举例说明2者的作用:

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

inheritAttrs
默认值为true,默认表示如果父组件如果传递给子组件的参数,子组件没有接收(既没有props),那么这个参数会被当作标签的特性展示在子组件的dom树中。
举例:默认情况:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
主动设置:inheritAttrs:false
在这里插入图片描述
在这里插入图片描述

参考资料:

vue官网

Vue 父子组件数据传递( inheritAttrs + $attrs + $listeners)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值