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的使用。

巴特西

vue vm.$attrs 使用

最新文章

热门文章