vue vm.$attrs 使用
1、vm.$attrs 说明
https://cn.vuejs.org/v2/api/#vm-attrs
将父组件的属性(除去在props中传入的属性)传递给子组件。
2、代码分析
以下是element-ui input源码
<input :tabindex="tabindex" v-if="type !== 'textarea'" class="el-input__inner" v-bind="$attrs" :type="type" :disabled="inputDisabled" :readonly="readonly" :autocomplete="autoComplete || autocomplete" :value="currentValue" ref="input" @compositionstart="handleComposition" @compositionupdate="handleComposition" @compositionend="handleComposition" @input="handleInput" @focus="handleFocus" @blur="handleBlur" @change="handleChange" :aria-label="label" >
el-input的props源码:
props: {
value: [String, Number],
size: String,
resize: String,
form: String,
disabled: Boolean,
readonly: Boolean,
type: {
type: String,
default: 'text'
},
autosize: {
type: [Boolean, Object],
default: false
},
autocomplete: {
type: String,
default: 'off'
},
/** @Deprecated in next major version */
autoComplete: {
type: String,
validator(val) {
process.env.NODE_ENV !== 'production' &&
console.warn('[Element Warn][Input]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.');
return true;
}
},
validateEvent: {
type: Boolean,
default: true
},
suffixIcon: String,
prefixIcon: String,
label: String,
clearable: {
type: Boolean,
default: false
},
tabindex: String
},
以下是el-input小例子:
<el-input maxlength="5" minlength="2">
</el-input>
<el-input>
组件添加了2个原生属性,注意这2个原生属性并没有在prop里面,这2个属性是控制input的最大输入和最小输入长度的,那么这2个属性现在仅仅放在了父元素<el-input>
上,如何将其传递给素<el-input>
内的原生input子元素呢?不传递则这2个属性不起作用,因为子input上没有这2个属性。答案就是通过v-bind="$attrs"
来实现,它将父元素所有非prop的特性都绑定在了子元素input上,否则还得在props里声明maxlength,minlength,代码量增大。这就是
$attrs
的使用。作者:孟繁贵 Email:meng010387@126.com 期待共同进步!