v-bind=“$attrs“相关属性inheritAttrs:false的解释

文章目录

前言
一、inheritAttrs:false的用处是什么？
二、场景比较

前言

学习v-bind="$attrs"这个知识点时接触到了一个新的属性：inheritAttrs: false ，下面是我结合代码对该属性的一些分析。

一、inheritAttrs:false的用处是什么？

避免父作用域的不被认作props的特性绑定应用在子组件的根元素上，导致在子组件中无法使用vm.$attrs对象获取非props特性值。

二、场景比较

以下图片的内容是自定义的一个组件，给该组件传递了两个props参数：name和age，还有一个非props特性sex。
v-bind=“$attrs“相关属性inheritAttrs:false的解释
这张图是未在my-parent组件实例化对象中添加inheritAttrs: false 属性时，浏览器渲染的结果，sex属性被当成my-parent根组件上的一个HTML属性了。

这张图是在my-parent组件实例化对象中加上了inheritAttrs: false 属性时，浏览器渲染的结果。很明显，浏览器并未把sex属性当成my-parent组件根元素的某个HTML属性去渲染
v-bind=“$attrs“相关属性inheritAttrs:false的解释