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

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

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

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

举例说明2者的作用:

vue关于$attrs,$listeners,inheritAttrs的使用与想法_第1张图片

vue关于$attrs,$listeners,inheritAttrs的使用与想法_第2张图片
vue关于$attrs,$listeners,inheritAttrs的使用与想法_第3张图片
vue关于$attrs,$listeners,inheritAttrs的使用与想法_第4张图片
vue关于$attrs,$listeners,inheritAttrs的使用与想法_第5张图片

inheritAttrs
默认值为true,默认表示如果父组件如果传递给子组件的参数,子组件没有接收(既没有props),那么这个参数会被当作标签的特性展示在子组件的dom树中。
举例:默认情况:
vue关于$attrs,$listeners,inheritAttrs的使用与想法_第6张图片
vue关于$attrs,$listeners,inheritAttrs的使用与想法_第7张图片

vue关于$attrs,$listeners,inheritAttrs的使用与想法_第8张图片
主动设置:inheritAttrs:false
vue关于$attrs,$listeners,inheritAttrs的使用与想法_第9张图片
vue关于$attrs,$listeners,inheritAttrs的使用与想法_第10张图片

参考资料:

vue官网

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

你可能感兴趣的:(前端技术,js,javascript,vue.js)