组件配置项inheritAttrs、组件实例属性$attrs和$listeners

最新推荐文章于 2023-01-19 16:21:52 发布
最新推荐文章于 2023-01-19 16:21:52 发布
阅读量291 收藏
点赞数
分类专栏： vue 文章标签： vue

1. 使用子组件传递了三个prop，但子组件值声明了两个prop，那么多出来的那个将被作为html自定义属性显示在子组件的根元素上。解决办法：在子组件的配置项中增加：inheritAttrs: false;这样就不会再根元素上增加。

2. 使用子组件传递了三个prop，但子组件值声明了两个prop。多余的那个未声明的可以用this.$attrs来获取

3. $listeners是组件的内置属性，它的值是父组件(不含 .native 修饰器的) v-on 事件监听器。

永远 22
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue.js】vue2组件间通信方式总结
weixin_43655896的博客
01-21 1343
目录 1. props传参 (1).父组件 ==> 子组件 (2).子组件 ==> 父组件 2.组件的自定义事件 3. 全局事件总线 4. 消息订阅和发布 5.vuex 1. 概念： 2.使用场景： 3.搭建vuex环境 4.vuex的具体使用 6. 插槽 一. 默认插槽： 二. 具名插槽： 三. 作用域插槽： 1. props传参 适用于父子组件之间传递参数 ​ (1).父组件 ==> 子组件 通信 ​ (2).子组件 ==&gt...
Vue知识点
m0_61679135的博客
03-25 2072
目录 1.Vue的优点？Vue的缺点？ 2.为什么说Vue是一个渐进式框架？ 3.Vue跟React的相同点与不同点？ 1. Vue的优点？Vue的缺点？ 优点：渐进式、组件化、轻量级、虚拟 DOM 、响应式、单页面路由、数据与试图分开。 缺点：单页面不利于 SEO、不支持IE8以下、首屏加载时间长。 2. 为什么说Vue是一个渐进式框架？ 我觉得可能是因为 Vue主张少，不强势。你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的渐.
组件配置项
幸福有多远
03-01 306
[{ "name": "基础属性", "attributes": [{ "text": "组件标识", "bindControlAttr": "caption", "showType": "text" }, { "text": "是否可见",...
Vue组件的配置项Props
李公子的博客
08-03 466
props配置项 1.功能：让组件接收外部传过来的数据 2.传递数据：```<Demoname="xxx"/>``` 3.接收数据： 1.第一种方式（只接收）：```props:['name']``` 2.第二种方式（限制类型）：```props:{name:String}``` 3.第三种方式（限制类型、限制必要性、指定默认值）： ```js props:{ ...
(五) 组件的配置属性
finally_m
11-30 283
在ExtJS中，除了一些特殊的组件或类以外，所有的组件在初始化的时候都可以在构造函数使用一个包含属性名称及值的对象，该对象中的信息也就是指组件的配置属性。比如配置一个面板：new Ext.Panel({title:"面板",html"面板内容",height:100}); 再比如创建一个按钮：var b=new Ext.Button({text:"添加",pressed:true, heigth...
vue组件-props配置项
qq_52347540的博客
10-28 245
功能：让组件能接收外部传入的数据 传输数据 <School name="xxx" age="xxx" /> 接收数据 先配置全新配置项props 第一种: 简单接收 props:['name','age'] 第二种：限制类型 props:{ name:String age:number } 第三种：全能限制 props{ name{ type:String ,
13.开发配置管理组件
Erik_ly的博客
03-06 1996
本文为《Spark大型电商项目实战》 系列文章之一，主要介绍配置管理组件及静态代码块的概念，并且进行管理组件的初步开发并测试。配置管理组件介绍 配置管理组件可以复杂，也可以很简单，对于简单的配置管理组件来说，只要开发一个类，可以在第一次访问它的时候，就从对应的properties文件中，读取配置项，并提供外界获取某个配置key对应的value的方法； 如果是特别复杂的配置管理组件，那么可能需要使用一
Vue高版本中一些新特性的使用详解
10-17
本篇文章将详细介绍Vue高版本中的一些新特性，包括深度作用选择器、组件配置项inheritAttrs以及组件实例属性$attrs和$listeners的使用。 首先来看深度作用选择器，这并不是Vue框架直接提供的功能，而是依赖于vue-...
文档_Vue02_事件处理_表单双向绑定_组件_Prop_自定义事件_插槽_动态与异步组件
pre_eminent的JAVA学习园地
05-05 1182
Vue.js_官方文档学习笔记_Part_02事件处理监听事件可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。示例：&lt;div id="example-1"&gt; &lt;button v-on:click="counter += 1"&gt;Add 1&lt;/button&gt; &lt;p&gt;The button above has...
vue基于vant封装日期组件
weixin_46302624的博客
01-19 694
然后通过van-popup来控制弹出层的显隐，poppable为true才支持的那些属性van-popup也支持，所以抽出来做成配置项，但是poppable为false是平铺效果，不太友好，就自己通过控制css来将它手动调整成正常显示，所以加了style配置项。刚开始没用van-popup在外层包裹，是直接在van-calendar上写，用了v-on="$listeners"就会有上面问题，但是不用的话在父组件中的子组件调用上调用原生组件带的方法就无效！
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
11-21
vue父子组件之间的传值我们都知道使用props和emit，但是祖孙之间的传值在以前，我们都需要子辈作为中间人，当祖辈有值要传递给孙辈时，需要子辈作为中间人把值传递给孙辈，当孙辈想要改变祖辈的值时，需要先emit子辈的方法，然后子辈再emit父辈的方法从而改变祖辈的值，如果是多级组件嵌套的话，那么祖孙辈之间传值，就会变得非常的繁琐，为了解决这个需求，vue2.4版本产生了$attrs，$listeners，inheritAttrs这三个属性。 vm.$attrs 官方API vm.$attrs 2.4.0 新增，类型：{ [key: string]: string }，只读 详细： 包含
Vue 2.4.0新增inheritAttrs，attrs
weixin_39612961的博客
09-25 450
在看element-ui input组件的源码时发现，子组件并没有对应的props来接收父组件传递的placeholder值，查阅资料发现使用了以下两个特性实现父组件与子组件之前的数据传递（也可实现嵌套层级比较深组件数据的传递） inheritAttrs：默认值true, 在组件定义中添加inheritAttrs：false，组件将不会把未被注册的props呈现为普通的HTML属性 $attr...
Vue2.4.0 新增的inheritAttrs，attrs
.
10-08 607
/// Vue2.4.0 新增的inheritAttrs，attrs 1.适用于Vue中全套层数深的组件，从来从父组件向子组件传递数据(除style和class) 2.当一个组件没有声明任何prop时候，attrs里面包含着全部的上层组件传递的所有数据(除style和class) 3.当声明了prop时候，attrs里面包含除去prop里面的数据剩下的数据。 //// inher...
Vue2.4.0新增inheritAttrs，attrs详解，补充说明$listener
good god~的博客
11-26 439
场景介绍 vue中的属性绑定只能是父组件传递给子组件。当你有这样的需求：你想向嵌套层级比较深的组件传递数据的时候，只能由父组件传递给子组件，子组件再传递给孙子组件，例如： <parent-component :passdown="passdown"> <child-component :passdown="passdown"> <grand-child-compo...
Vue中$attrs和inheritAttrs的理解
TinaSlowDown的博客
05-26 1244
开发过程中我们有时就遇到这样的场景： 1）.我们需要在引用的父组件中，根据需要添加一些属性，而这些属性我们又不希望在组件中一一利用props传递； 2）.我们怎样确定父组件中添加的这些属性会添加到子组件的哪个元素中 官方文档讲解组件的属性传递时，讲到$attrs和inheritAttrs这两个属性，且两个属性结合会比较好用。乍一看没看懂，结合代码演示才搞清楚。在此记录，也供有同样困惑的朋友分享。 ...
Vue 冷门知识 - -自定义插件 自定义指令 inheritAttrs，attrs 和 .sync 以及 this.$options 和箭头函数中的this
weixin_44685781的博客
04-03 456
实现子组件与父组件双向绑定的.sync修饰符 首先 缕清思路 子组件想要修改父组件的值 父组件需要先传递数据给子组件，子组件接收后$emit触发父组件中的函数 才能修改父组件中的值 但是这个方法有一个弊端 子组件修改父组件的值需要一个传递的过程，两个值并不是同步的 一个组件需要提供多个双向绑定的属性时使用，只能选用一个属性来提供 v-model 功能，但如果有其他属性也要提供双向绑定，就需要.s...
vue3 `inheritAttrs`属性继承与`$attrs`使用与讲解
从今年开始写写博客~~
02-12 6879
当template有根元素的时候，绑定到组件上的属性和事件会自动继承到根元素上。 当组件返回单个根节点时，非 prop 的 attribute 将自动添加到根节点的 attribute 中。 同样的规则也适用于事件监听器： 如果组件是片段(多节点)，并且组件标签绑定了attr和事件，都不会继承，并且会抛出警告！ 也就是说，片段组件需要将 inheritAttrs 设置为 false。当然不设置为 false 也有个好处，抛出警告告诉编程人员，这个组件是多节点的！你对该组件标签设置的 attr 和 事
关于Vue的inheritAttrs的理解
热门推荐
野生松
04-28 1万+
定义： vue官网对于inheritAttrs的属性解释：默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。 如果你不希望组件的根元素继承特性，你可以在组件的选项中设置inheritAttrs: false。 这个很不好理解，这里我直接用代码说明：...
父子组件中$attrs和$listeners使用
最新发布
04-26
$attrs 和 $listeners 属性是 Vue.js 框架中的两个特殊的对象，它们被用于父子组件之间的通信。$attrs 对象包含了父组件向子组件传递的所有属性和值，这些属性和值都不是子组件自己定义的 props。$listeners 对象...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值