gpt4 book ai didi

Vue中inheritAttrs的使用实例详解

转载 作者:qq735679552 更新时间:2022-09-27 22:32:09 33 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Vue中inheritAttrs的使用实例详解由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

今天举一个例子解释一下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
  • 延伸 · 阅读

    • 2021-12-23Vue 修改网站图标的方法
    • 2021-12-23element 动态合并表格的步骤
    • 2021-12-23vue导入.md文件的步骤(markdown转HTML)
    • 2021-12-23SpringBoot+Vue 前后端合并部署的配置方法
    • 2021-12-22vue中实现点击空白区域关闭弹窗的两种方法
    • 2021-12-22梳理一下vue中的生命周期
    精彩推荐
    • vue.jsvue监听滚动事件的方法

      vue监听滚动事件的方法

      这篇文章主要介绍了vue监听滚动事件的方法,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下... 。

      东海之子 943 2021-12-15
    • vue.js在vue项目中封装echarts的步骤

      在vue项目中封装echarts的步骤

      这篇文章主要介绍了在vue项目中封装echarts的步骤,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下... 。

      陌上兮月 829 2021-12-20
    • vue.jsvue-cli4.0多环境配置变量与模式详解

      vue-cli4.0多环境配置变量与模式详解

      这篇文章主要介绍了vue-cli4.0多环境配置变量与模式详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考... 。

      紫藤萝yu 922 2021-12-23
    • vue.jsvue使用require.context实现动态注册路由

      vue使用require.context实现动态注册路由

      这篇文章主要介绍了vue使用require.context实现动态注册路由的方法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下... 。

      紫藤萝yu 890 2021-12-20
    • vue.js详解Vue的异步更新实现原理

      详解Vue的异步更新实现原理

      这篇文章主要介绍了Vue的异步更新实现原理,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下... 。

      Liqiuyue 458 2021-12-16
    • vue.js基于vue+echarts数据可视化大屏展示的实现

      基于vue+echarts数据可视化大屏展示的实现

      这篇文章主要介绍了基于vue+echarts数据可视化大屏展示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 。

      你好!YOYO 1187 2021-12-20
    • vue.jsvue中如何添加百度统计代码

      vue中如何添加百度统计代码

      这篇文章主要介绍了vue中如何添加百度统计代码,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下... 。

      帆酱 719 2021-12-15
    • vue.jsVue通过阿里云oss的url连接直接下载文件并修改文件名的方法

      Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法

      这篇文章主要介绍了Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值... 。

      小白艰辛路 1044 2021-12-20

    最后此篇关于Vue中inheritAttrs的使用实例详解的文章就讲到这里了,如果你想了解更多关于Vue中inheritAttrs的使用实例详解的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

    33 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com