Vue组件的inheritAttrs属性

最新推荐文章于 2023-06-11 23:34:13 发布
最新推荐文章于 2023-06-11 23:34:13 发布
阅读量828 收藏 2
点赞数
分类专栏： 笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49868928/article/details/111935639
版权

vue官网对于inheritAttrs的属性解释：如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。
可能不是很好理解，我们可以举个例子来验证一下。

当inheritAttrs为false时

<div id ="wxApp" class ="appclass"> 
        <blog-post title="标题" demo-one="未定义属性1" demo-tow="未定义属性2" class="cointer2" style="color:red"></blog-post>
    </div>


Vue.component(
最低0.47元/天 解锁文章
敬礼 salute
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue组件watch属性实例讲解
12-29
本文实例为大家分享了vue组件watch属性的具体代码，供大家参考，具体内容如下 <!doctype html> <html> <head> <meta charset=UTF-8> <title>wacth属性</title> [removed]...
关于vue组件事件属性穿透详解
12-13
组件事件属性穿透 属性 $attrs包含从父组件传过来的属性，但不包含子组件中prop中的属性以及class和style，所以对于那些html元素原生属性，可以不用再子组件中声明，直接从父组件中传进来就好 // 子组件 <...
Vue inheritAttrs 属性的使用
mingugi_pigBrother的博客
05-09 1610
官方给出的解释如下： 1、inheritAttrs 为true(默认值)，子组件的根元素会自动绑定父组件传过来的（非prop）属性，若根元素本身也声明了同样的属性，会被覆盖，如图所示 父组件调用子组件，传递属性 myattr： 子组件 (child) 的根元素上自定义属性 myattr： 最终渲染效果，子组件的根元素 myattr属性会被覆盖 2、inheritAttrs 为false 最终渲染效果，子组件的根元素 myattr属性不会被覆盖 当然在子组件中可通过t..
inheritAttrs: false使用
weixin_44210750的博客
07-02 2377
如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。 上面是官网的解释 下面是我的理解： <my-component message = "message" hhh = "hhh"></my-component> Vue.component('my-component', { inheritAttrs: true, props: { m.
Vue2.4.0新增inheritAttrs，attrs详解，补充说明$listener
good god~的博客
11-26 419
场景介绍 vue中的属性绑定只能是父组件传递给子组件。当你有这样的需求：你想向嵌套层级比较深的组件传递数据的时候，只能由父组件传递给子组件，子组件再传递给孙子组件，例如： <parent-component :passdown="passdown"> <child-component :passdown="passdown"> <grand-child-compo...
关于Vue的inheritAttrs的理解
热门推荐
野生松
04-28 1万+
定义： vue官网对于inheritAttrs的属性解释：默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。 如果你不希望组件的根元素继承特性，你可以在组件的选项中设置inheritAttrs: false。 这个很不好理解，这里我直接用代码说明：...
vue3 `inheritAttrs`属性继承与`$attrs`使用与讲解
从今年开始写写博客~~
02-12 6302
当template有根元素的时候，绑定到组件上的属性和事件会自动继承到根元素上。 当组件返回单个根节点时，非 prop 的 attribute 将自动添加到根节点的 attribute 中。 同样的规则也适用于事件监听器： 如果组件是片段(多节点)，并且组件标签绑定了attr和事件，都不会继承，并且会抛出警告！ 也就是说，片段组件需要将 inheritAttrs 设置为 false。当然不设置为 false 也有个好处，抛出警告告诉编程人员，这个组件是多节点的！你对该组件标签设置的 attr 和 事
在Vue中获取组件声明时的name属性方法
10-18
今天小编就为大家分享一篇在Vue中获取组件声明时的name属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue组件中的样式属性scoped实例详解
01-19
vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素  它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> ...
Vue2.x跨级/嵌套组件通信$attrs，$listeners，inheritAttrs的使用
xiexikk的博客
05-08 1224
一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C/D 都是父子关系，C 和 D 是兄弟关系，A 和 C/D 是隔代关系。 vue组件之间的通信6种为： 父子通信：props/$emit 兄弟通信：eventHub（$emit / $on） vue 的状态管理器，存储的数据是响应式：vuex 多级组件嵌套：$attrs / $listeners 注入依赖：provide/inject 组件访问：$parent / $children与 ref 假如我们想让A和C进行通信，有些小伙伴就
vue inheritAttrs、$attrs和$listeners使用 跨级组件传值
weixin_45776545的博客
06-11 72
【代码】vue inheritAttrs、$attrs和$listeners使用 跨级组件传值。
v-bind=“$attrs“相关属性inheritAttrs:false的解释
爱代码的小海的博客
09-26 2298
文章目录前言一、inheritAttrs:false的用处是什么？二、场景比较 前言 学习v-bind="$attrs"这个知识点时接触到了一个新的属性：inheritAttrs: false ，下面是我结合代码对该属性的一些分析。 一、inheritAttrs:false的用处是什么？ 避免父作用域的不被认作props的特性绑定应用在子组件的根元素上，导致在子组件中无法使用vm.$attrs对象获取非props特性值。 二、场景比较 以下图片的内容是自定义的一个组件，给该组件传递了两个props参数：n
Vue2.4.0 新增的inheritAttrs，attrs
.
10-08 599
/// Vue2.4.0 新增的inheritAttrs，attrs 1.适用于Vue中全套层数深的组件，从来从父组件向子组件传递数据(除style和class) 2.当一个组件没有声明任何prop时候，attrs里面包含着全部的上层组件传递的所有数据(除style和class) 3.当声明了prop时候，attrs里面包含除去prop里面的数据剩下的数据。 //// inher...
【译文】详解 Vue 2.4.0 带来的 4 个重大变化
weixin_34321977的博客
07-25 183
译者：张婧雅，美团点评金融前端团队成员，目前是vue生态的重度用户，以后将继续研究深入vue最佳实践。 译者注：实践解决方案是简单的，但思考的过程才是值得我们探索的。原文链接：4 Important Changes In Vue.js 2.4.0 本周Vue.js发布了有着丰富新特性和更加优化的2.4.0版本。在这篇文章中，我将跟大家分享4个有突破性新特性。 服务端渲染异步组件 包裹组件内...
关于vue.js里禁用特性继承的理解
s_web_q的博客
05-08 5583
最近在跟着官方文档学习vue.js的文章，当看到禁用继承特性这一点的时候不是很理解，后跟着官方的实例运行了一下，算是弄懂了一些，特此记录，仅供参考！首先假设如今有一个组件&lt;base-input&gt;&lt;/base-input&gt;,创建改组件式的代码如下：Vue.component("base-input", { inheritAttrs: false, //此处设置禁用继承特性 ...
Vue 2.4.0新增inheritAttrs，attrs
weixin_39612961的博客
09-25 431
在看element-ui input组件的源码时发现，子组件并没有对应的props来接收父组件传递的placeholder值，查阅资料发现使用了以下两个特性实现父组件与子组件之前的数据传递（也可实现嵌套层级比较深组件数据的传递） inheritAttrs：默认值true, 在组件定义中添加inheritAttrs：false，组件将不会把未被注册的props呈现为普通的HTML属性 $attr...
Vue2.4组件间通信新姿势
大灰狼的小绵羊哥哥的博客
08-08 3960
Vue应用在组件化之后，通常存在着 父子组件、兄弟组件、跨级组件 等组件关系，那么组件之间如何进行通信；Vue2.4提供了两种新的组件通讯方法。 在 Vue 中，父子组件的关系可以总结为 props down、events up。 父子组件通信 ：父组件通过 props 向下传递数据给子组件子父组件通信 ：子组件通过 events 给父组件发送消息  -使用 $on(even
Vue $attrs 以及 inheritAttrs
weixin_41806000的博客
02-28 602
学习记录 官方代码为： <div id="app"> <input type="text" value="hihihi"> <base-input v-model="username" required placeholder='Enter your usernam...
vue多级嵌套组件传参
qq_21681391的博客
08-03 1128
$attrs $attrs概念： 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。 参考文档 $listeners $listeners概念：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$li
vue 组件继承父级样式
最新发布
09-13
1. 使用`inheritAttrs`属性：默认情况下，Vue组件不会继承父组件的样式。但是你可以通过在子组件中设置`inheritAttrs`属性为`false`，然后在子组件的根元素上使用`$attrs`对象来继承父组件的样式。例如： ```vue ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值