Vue 2.4.0新增inheritAttrs，attrs

最新推荐文章于 2022-05-26 11:01:59 发布
最新推荐文章于 2022-05-26 11:01:59 发布
阅读量494 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39612961/article/details/82840129
版权

在看element-ui input组件的源码时发现，子组件并没有对应的props来接收父组件传递的placeholder值，查阅资料发现使用了以下两个特性实现父组件与子组件之前的数据传递（也可实现嵌套层级比较深组件数据的传递）

inheritAttrs：默认值true, 在组件定义中添加inheritAttrs：false，组件将不会把未被注册的props呈现为普通的HTML属性

$attr：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)

代码如下

查看dom结构

此时父元素并没有placeholder属性，若去掉inheritAttrs，父元素也会有placeholder属性

Vue组件的inheritAttrs属性
weixin_49868928的博客
12-29 970
vue官网对于inheritAttrs的属性解释：如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。 可能不是很好理解，我们可以举个例子来验证一下。 当inheritAttrs为false时 <div id ="wxApp" class ="appclass"> <blog-post title="标题" demo-one="未定义属性1" demo-tow="未定义属性2" class="cointer2" style=
vue.2.4.0.js_简单易用且高度可定制的Vue.js 2.0模式
cuk5340的博客
07-22 1051
vue.2.4.0.js Vue.js模态 (Vue.js modal) Simple to use, highly customizable, mobile friendly Vue.js 2.0+ modal with SSR support. 具有SSR支持的易于使用，高度可定制的，移动友好的Vue.js 2.0+模式。 View demo 查看演示 Download Source ...
vue-2.4.0.js
02-25
vue-2.4.0.js常用的vue前端框架。vue提供大量组件，简单易用，让程序员放手去写代码，减少DOM操作，十分happy！
关于Vue的inheritAttrs的理解
热门推荐
野生松
04-28 1万+
定义： vue官网对于inheritAttrs的属性解释：默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。 如果你不希望组件的根元素继承特性，你可以在组件的选项中设置inheritAttrs: false。 这个很不好理解，这里我直接用代码说明：...
Vue属性 inheritAttrs、$attrs和$listeners初窥
WangYangsea的博客
06-12 1139
废物废物
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
10-15
在Vue.js框架中，Vue 2.4.0引入了两个新的特性：`$attrs`和`inheritAttrs`，它们极大地简化了组件间的数据传递，特别是对于祖孙组件之间的通信。本文将深入探讨这两个特性的具体使用和应用场景。 `$attrs`对象是一...
Vue中的$attrs和$listener的使用
青年码农
05-26 1893
点击上方“青年码农”关注回复“特效源码”可获取各种资料前面讲了关于vue组件间数据传递，如果没有看过，关注公众号，有历史推荐，讲的比较详细，有代码，新手也能看懂，今天说一说$attrs和$listener。疫情之前，在家关了这么久，也没怎么更新，最近在看大佬的项目，学习下新的思路。之前项目上，父子组件传递数据，都是用props去接收和this.$emit触发父组件方法。这次我们用$attrs和$listener，都是在2.4.0新增。$attrs官方解释：包含了父作用域中不作为 prop 被识别 (且获取)
Vue祖孙组件之间的通信---------$attrs、$listeners详解
yiyueqinghui的博客
10-29 1153
$attrs 功能：实现当前组件的父组件向当前组件的子组件通信 说明：$attrs是一个对象，包含了当前组件的父组件传递给当前组件的所有的属性绑定 (当前组件props声明的属性除外、父组件上绑定的class 和 style 除外) 编码 //parent.vue 当前组件的父组件 <SonComponent class="box" text="1组件" ></SonComponent> //son.vue 当前组件 <GrandSonComponen
Vue案例引发的「嵌套组件」通信的简单方式
六小登登的专栏
02-27 467
我们都知道 Vue 是采用组件化开发的模式，组件化的优势在于相对独立，易于维护，可复用。你可以把项目看成许多组件的组合而成。 既然项目中存在很多的组件，而且又是相对独立的，但组件间肯定是存在数据的传递交互。Vue中给我提供比较多的方式去进行组件间的交互通信。 这篇文章不打算详尽组件之间的通信，而是说说利用 $attrs 与 $listeners 进行「嵌套组件」的通信。 可以想象一下项目中组...
vue $attrs inheritAttrs
qq_42451776的博客
08-19 166
文章目录$attrsinheritAttrs $attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。并且可以通过 v-bind=“attrs"传入内部组件，子组件可以直接通过v−bind:"attrs" 传入内部组件，子组件可以直接通过v-bind:"attrs"传入内部组件，子组件可以直接通过v−bind:"attrs”,绑定全部传递过来的属性 inheritAttrs 通常和attrs配合使用,可以清除根组件上重复绑定at
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
08-27
主要介绍了Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners),需要的朋友可以参考下
vue.js 2.0下载
12-07
vue.js 前端框架,2.0版本
vm.$attrs和$listeners 【Vue 2.4.0新增inheritAttrs，attrs详解】
細水、長流√的专栏
05-20 697
1、vm.$attrs简介 首先我们来看下vue官方对vm.$attrs的介绍： 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。 猛一看有点看不明白.... 2、场景介绍 vue中一个比较令人烦恼的事情是属性只能从父组件传递给子组件。这也就意味着当
Vue inheritAttrs 属性的使用
mingugi_pigBrother的博客
05-09 1960
官方给出的解释如下： 1、inheritAttrs 为true(默认值)，子组件的根元素会自动绑定父组件传过来的（非prop）属性，若根元素本身也声明了同样的属性，会被覆盖，如图所示 父组件调用子组件，传递属性 myattr： 子组件 (child) 的根元素上自定义属性 myattr： 最终渲染效果，子组件的根元素 myattr属性会被覆盖 2、inheritAttrs 为false 最终渲染效果，子组件的根元素 myattr属性不会被覆盖 当然在子组件中可通过t..
Vue2.4.0 新增的inheritAttrs，attrs
.
10-08 636
/// Vue2.4.0 新增的inheritAttrs，attrs 1.适用于Vue中全套层数深的组件，从来从父组件向子组件传递数据(除style和class) 2.当一个组件没有声明任何prop时候，attrs里面包含着全部的上层组件传递的所有数据(除style和class) 3.当声明了prop时候，attrs里面包含除去prop里面的数据剩下的数据。 //// inher...
Vue $attrs 以及 inheritAttrs
weixin_41806000的博客
02-28 725
学习记录 官方代码为： <div id="app"> <input type="text" value="hihihi"> <base-input v-model="username" required placeholder='Enter your usernam...
vue组件的inheritAttrs属性
diaobiteng1128的博客
06-29 306
vue官网对于inheritAttrs的属性解释：如果你不希望组件的根元素继承特性，你可以在组件的选项中设置inheritAttrs: false。 可能不是很好理解，我们可以举个例子来验证一下。 父组件 parent-component.vue <template> 　<div class="parent"> <child-co...
Vue2.4.0新增inheritAttrs，attrs详解，补充说明$listener
good god~的博客
11-26 488
场景介绍 vue中的属性绑定只能是父组件传递给子组件。当你有这样的需求：你想向嵌套层级比较深的组件传递数据的时候，只能由父组件传递给子组件，子组件再传递给孙子组件，例如： <parent-component :passdown="passdown"> <child-component :passdown="passdown"> <grand-child-compo...
Vue--inheritAttrs--使用/教程/实例
IT利刃出鞘的博客
01-10 761
原文网址： 简介 说明 本文用示例介绍Vue的inheritAttrs的用法。 官网 Prop — Vue.js API — Vue.js inheritAttrs简介 官网原话：默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会...
Vue中$attrs与$listeners的谨慎使用解析
Vue中的`$attrs`和`$listeners`是两个特殊的属性，它们主要用于在组件间传递属性和事件。在处理复杂的组件嵌套和通信时，这两个属性提供了便利，但也可能带来潜在的问题。下面我们将深入探讨为什么在使用`$attrs`和`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值