欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

在vue中使用inheritAttrs实现组件的扩展性介绍

程序员文章站 2022-04-09 23:43:58
1、首先我们创建一个input组件2、使用组件的时候,随便增加一些属性,如&l...

1、首先我们创建一个input组件

2、使用组件的时候,随便增加一些属性,如

<inputcom type="text" class="input-a"></inputcom>

<inputcom type="password" class="input-b"></inputcom>

3、查看最终的渲染结果为(与props不会冲突)

在vue中使用inheritAttrs实现组件的扩展性介绍

补充知识:vue组件深层传值inheritattrs、$attrs、$listeners

1、$attrs

组件深层传值 可通过父组件绑定 v-bind="$attrs"传给子组件

一般子组件this.$attrs可以拿到父组件的所有传输的属性。

当子组件props注册了声明某属性之后,this.$attrs将不包含该属性;

同理通过v-bind="$attrs"绑定孙子组件也不会包含子组件props声明的属性。

在vue中使用inheritAttrs实现组件的扩展性介绍

2、inheritattrs

默认值为true

默认情况子组件props未声明,父组件传输的其他属性会被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 html attribute 应用在子组件的根元素上(有可能会覆盖子组件根元素上的某些属性列如 type="text"之类属性)

子组件的inheritattrs 设置为false可以避免

在vue中使用inheritAttrs实现组件的扩展性介绍

3、$listeners

父组件-子组件-孙子组件,现在我要你在孙子组件里改变父组件的值,子组件直接绑定

<muti-select v-bind="$attrs" v-on="$listeners" class="select"></muti-select>

以上这篇在vue中使用inheritattrs实现组件的扩展性介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。