Vue中inheritAttrs的使用实例详解

时间：2021-10-22 15:13:50

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

先看代码

<body>
		<div id="app" class="vueclass">
			<my-com  height="100" src="/uploads/allimg/211223/15445CG7-0.png" width="372" />


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



	Vue中inheritAttrs的使用实例详解



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



	结果如下



	Vue中inheritAttrs的使用实例详解



	还有一种情况，先看代码



	
<body>
		<div id="app" class="vueclass">
			<my-com  height="67" src="/uploads/allimg/211223/15445AR3-3.png" width="989" />


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



	Vue中inheritAttrs的使用实例详解



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



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



	原文链接：https://blog.csdn.net/m0_51579165/article/details/111933414
  • vue
  • inheritAttrs

    • 延伸 · 阅读

    精彩推荐
    标签：

    相关文章