vue实现属性透传 v-bind="$attrs"

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue实现属性透传 v-bind="$attrs"相关的知识,希望对你有一定的参考价值。

参考技术A 1.官方定义
包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
我们可以简单理解为调用一个组件的时候传入属性 (class 和 style 除外),而且不在该组件内部的 props 中声明,就可以使用 v-bind="attrs"传入属性

2.应用场景
很多时候,我们需要对UI组件进行二次封装,这里以element ui为例,比如我们要封装一个date组件,在大多数场景下,我们需要设置属性placeholder、clearable等等

使用vue设置disabled属性

参考技术A 在写项目的时候,由于save和update方法使用了同一个界面,在保存的时候下拉框可选,在修改的时候下拉框不可选

实现方法   v-bind:disabled="dataForm.trainName!=0"

以上是关于vue实现属性透传 v-bind="$attrs"的主要内容,如果未能解决你的问题,请参考以下文章

vue 3.0组件(下)

[vue]v-bind: sytle/class-bind&属性值绑定

使用vue设置disabled属性

Vue入门单双向数据流和事件绑定

vue中按钮使用v-bind:class动态切换颜色,两种做法

如何解决“属性内的插值已被删除。使用 v-bind 或冒号速记”? Vue.js 2