Vue中inheritAttrs的使用实例详解

2022-01-14,,,

这篇文章主要介绍了VueinheritAttrs的使用实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

今天举一个例子解释一下inheritAttrs的使用

先看代码

   

当inheritAttrs的值为false时,自定义属性是插入不到我们的组件中的,结果如下

当inheritAttrs的值为true时,自定义属性可以插入到我们的组件中,并且会覆盖掉在组件中相同未定义属性名称的值,结果如下

但在组件中定义的class属性和style属性,使用inheritAttrs属性并不能阻碍class属性和style属性传到模板中,如果模板中也存在class属性和style属性,这样属性会叠加到一起

结果如下

还有一种情况,先看代码

   

当模板里绑定v-bind="$attrs"时,inheritAttrs为true时,自定义属性可以插入到我们的组件中,并且会覆盖掉在组件中相同未定义属性名称的值,结果如下

当模板里绑定v-bind="$attrs"时,inheritAttrs为false时,自定义属性可以插入到我们的组件中,但不会覆盖掉在组件中相同未定义属性名称的值,结果如下

当模板里绑定v-bind="$attrs"时,并不会影响class属性与style属性,组件里的值依然会叠加到模板里

到此这篇关于Vue中inheritAttrs的使用的文章就介绍到这了,更多相关Vue inheritAttrs使用内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

以上就是Vue中inheritAttrs的使用实例详解的详细内容,更多请关注本站其它相关文章!

《Vue中inheritAttrs的使用实例详解.doc》

下载本文的Word格式文档,以方便收藏与打印。