Vue组件的inheritAttrs属性

最新推荐文章于 2024-04-02 17:04:32 发布
最新推荐文章于 2024-04-02 17:04:32 发布
阅读量829 收藏 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组件事件属性穿透详解
10-16
本文将详细讲解Vue组件中的事件属性穿透，以及如何有效地利用`$attrs`和`$listeners`来实现这一功能。 首先，我们要了解什么是事件属性穿透。在Vue中，当父组件向子组件传递属性时，有时我们希望子组件能够触发父...
Vue自定义属性实例分析
10-17
理解并熟练运用这些特性，可以帮助我们构建出更强大、更灵活的Vue组件，从而提升应用的可维护性和可扩展性。在实际开发中，要注意事件命名的规范，以及如何正确地处理组件内的事件监听和模型绑定，以确保组件能够...
Vue inheritAttrs 属性的使用
mingugi_pigBrother的博客
05-09 1619
官方给出的解释如下： 1、inheritAttrs 为true(默认值)，子组件的根元素会自动绑定父组件传过来的（非prop）属性，若根元素本身也声明了同样的属性，会被覆盖，如图所示 父组件调用子组件，传递属性 myattr： 子组件 (child) 的根元素上自定义属性 myattr： 最终渲染效果，子组件的根元素 myattr属性会被覆盖 2、inheritAttrs 为false 最终渲染效果，子组件的根元素 myattr属性不会被覆盖 当然在子组件中可通过t..
inheritAttrs: false使用
weixin_44210750的博客
07-02 2391
如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。 上面是官网的解释 下面是我的理解： <my-component message = "message" hhh = "hhh"></my-component> Vue.component('my-component', { inheritAttrs: true, props: { m.
Vue中的Attributes，详细分析
最新发布
nibabaoo的博客
04-02 887
最常见的需要禁用 attribute 继承的场景就是 attribute 需要应用在根节点以外的其他元素上。当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。有下面这样的多根节点模板，由于 Vue 不知道要将 attribute 透传到哪里，所以会抛出一个警告。和单根节点组件有所不同，有着多个根节点的组件没有自动 attribute 透传行为。“透传 attribute”指的是传递给一个组件，却没有被该组件声明为。attribute，它会和从父组件上继承的值合并。
Vue2.4.0新增inheritAttrs，attrs详解，补充说明$listener
good god~的博客
11-26 420
场景介绍 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 6383
当template有根元素的时候，绑定到组件上的属性和事件会自动继承到根元素上。 当组件返回单个根节点时，非 prop 的 attribute 将自动添加到根节点的 attribute 中。 同样的规则也适用于事件监听器： 如果组件是片段(多节点)，并且组件标签绑定了attr和事件，都不会继承，并且会抛出警告！ 也就是说，片段组件需要将 inheritAttrs 设置为 false。当然不设置为 false 也有个好处，抛出警告告诉编程人员，这个组件是多节点的！你对该组件标签设置的 attr 和 事
Vue组件间数据传递的方式(3种)
10-15
总结起来，Vue组件间数据传递主要包括 Props（属性传递）、$attrs（属性收集）和$listeners（方法收集）这三种方式。理解并熟练运用这些机制，可以帮助开发者更好地构建复杂、交互丰富的Vue应用程序。在实际开发中，...
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
08-27
Vue 父子组件数据传递是 Vue 开发中非常重要的一个概念，今天我们将详细介绍 Vue 父子组件数据传递的四种方式，分别是：通过 props 的方式、vuex 进行状态管理、Vue Event Bus、inheritAttrs + $attrs + $listeners...
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
10-15
总结起来，Vue 2.4.0引入的`$attrs`和`inheritAttrs`特性，使得组件间的数据传递更加灵活，减少了在祖孙组件之间传递属性的复杂性。`$attrs`允许我们访问并传递未声明的属性，而`inheritAttrs`让我们能够控制这些...
Vue2.x跨级/嵌套组件通信$attrs，$listeners，inheritAttrs的使用
xiexikk的博客
05-08 1250
一般来说，组件可以有以下几种关系： 如上图所示，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 2321
文章目录前言一、inheritAttrs:false的用处是什么？二、场景比较 前言 学习v-bind="$attrs"这个知识点时接触到了一个新的属性：inheritAttrs: false ，下面是我结合代码对该属性的一些分析。 一、inheritAttrs:false的用处是什么？ 避免父作用域的不被认作props的特性绑定应用在子组件的根元素上，导致在子组件中无法使用vm.$attrs对象获取非props特性值。 二、场景比较 以下图片的内容是自定义的一个组件，给该组件传递了两个props参数：n
Vue2.4.0 新增的inheritAttrs，attrs
.
10-08 600
/// 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 187
译者：张婧雅，美团点评金融前端团队成员，目前是vue生态的重度用户，以后将继续研究深入vue最佳实践。 译者注：实践解决方案是简单的，但思考的过程才是值得我们探索的。原文链接：4 Important Changes In Vue.js 2.4.0 本周Vue.js发布了有着丰富新特性和更加优化的2.4.0版本。在这篇文章中，我将跟大家分享4个有突破性新特性。 服务端渲染异步组件 包裹组件内...
关于vue.js里禁用特性继承的理解
s_web_q的博客
05-08 5585
最近在跟着官方文档学习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 3961
Vue应用在组件化之后，通常存在着 父子组件、兄弟组件、跨级组件 等组件关系，那么组件之间如何进行通信；Vue2.4提供了两种新的组件通讯方法。 在 Vue 中，父子组件的关系可以总结为 props down、events up。 父子组件通信 ：父组件通过 props 向下传递数据给子组件子父组件通信 ：子组件通过 events 给父组件发送消息  -使用 $on(even
vue 组件继承父级样式
09-13
在Vue中，组件可以通过继承父级样式来实现样式的继承。要实现这个功能，你可以使用以下几种方法： 1. 使用`inheritAttrs`属性：默认情况下，Vue组件不会继承父组件的样式。但是你可以通过在子组件中设置`inheritAttrs`属性为`false`，然后在子组件的根元素上使用`$attrs`对象来继承父组件的样式。例如： ```vue <template> <div :class="$attrs.class"> <!-- 子组件内容 --> </div> </template> <script> export default { inheritAttrs: false, // 其他组件选项 } </script> ``` 2. 使用`v-bind="$attrs"`：如果你只想继承父组件的样式，你可以使用`v-bind`指令将父组件的`$attrs`对象绑定到子组件的根元素上。例如： ```vue <template> <div v-bind="$attrs"> <!-- 子组件内容 --> </div> </template> <script> export default { // 其他组件选项 } </script> ``` 3. 使用CSS的`all: inherit`属性：另一种方法是在子组件的样式中使用CSS的`all: inherit`属性，该属性可以继承父组件的所有样式。例如： ```vue <template> <div class="inherit-style"> <!-- 子组件内容 --> </div> </template> <style scoped> .inherit-style { all: inherit; } </style> ``` 以上方法中，你可以根据自己的需求选择适合的方式来实现组件继承父级样式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值