今天举一个例子解释一下inheritAttrs的使用
先看代码
<body> <div id="app" class="vueclass"> <my-com height="100" src="/uploads/allimg/211223/15445CG7-0.png" width="372" />当inheritAttrs的值为true时，自定义属性可以插入到我们的组件中，并且会覆盖掉在组件中相同未定义属性名称的值，结果如下
但在组件中定义的class属性和style属性，使用inheritAttrs属性并不能阻碍class属性和style属性传到模板中，如果模板中也存在class属性和style属性，这样属性会叠加到一起
结果如下
还有一种情况，先看代码
<body> <div id="app" class="vueclass"> <my-com height="67" src="/uploads/allimg/211223/15445AR3-3.png" width="989" />当模板里绑定v-bind="$attrs"时，inheritAttrs为false时，自定义属性可以插入到我们的组件中，但不会覆盖掉在组件中相同未定义属性名称的值，结果如下
当模板里绑定v-bind="$attrs"时，并不会影响class属性与style属性，组件里的值依然会叠加到模板里
到此这篇关于Vue中inheritAttrs的使用的文章就介绍到这了,更多相关Vue inheritAttrs使用内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文链接：https://blog.csdn.net/m0_51579165/article/details/111933414
延伸 · 阅读
- 2022-03-10vue-router钩子函数实现路由守卫
- 2022-03-10谈谈Vue中的nextTick
- 2022-03-10Vue路由vue-router详细讲解指南
- 2022-03-10Vue中的父子组件通讯以及使用sync同步父子组件数
- 2022-03-10vue2.x 从vue.config.js配置到项目优化
- 2022-03-10VUE的tab页面切换的四种方法
- vue.js
Vue多选列表组件深入详解
这篇文章主要介绍了Vue多选列表组件深入详解，这个是vue的基本组件，有需要的同学可以研究下...
- vue.js
Vue项目中实现带参跳转功能
最近做了一个手机端系统，其中遇到了父页面需要携带参数跳转至子页面的问题，现已解决，下面分享一下实现过程，感兴趣的朋友一起看看吧...
- vue.js
Vue中引入svg图标的两种方式
这篇文章主要给大家介绍了关于Vue中引入svg图标的两种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的...
- vue.js
Vue2.x 项目性能优化之代码优化的实现
这篇文章主要介绍了Vue2.x 项目性能优化之代码优化的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋...
- vue.js
梳理一下vue中的生命周期
看过很多人讲vue的生命周期，但总是被绕的云里雾里，尤其是自学的同学，可能js的基础也不是太牢固，听起来更是吃力，那我就已个人之浅见，以大白话...
- vue.js
用vite搭建vue3应用的实现方法
这篇文章主要介绍了用vite搭建vue3应用的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下...
- vue.js
Vue2.x-使用防抖以及节流的示例
这篇文章主要介绍了Vue2.x-使用防抖以及节流的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下...
- vue.js
详解vue 表单绑定与组件
这篇文章主要介绍了vue 表单绑定与组件的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下...
