首页 > 建站教程 > 前端框架 >  vue 封装input组件正文

vue 封装input组件

封装组件之前我们需要知道 v-mode 的默认值。

组件上使用 v-mode 会默认传给子组件 props 一个 value 属性。

只需要把 props 里面的 value 属性拿绑定在 input 的 :value=“value” 属性上。


html代码:

<template>
  <div class="wrapper">
    <input ref="input" :value="value" type="text" :disabled="disabled" :readonly="readonly"
      @change="$emit('change', $event.target.value)"
      @input="$emit('input', $event.target.value)"
      @focus="$emit('focus', $event.target.value)"
      @blur="$emit('blur', $event.target.value)"
    >
  </div>
</template>


js代码:

export default {
  name: 'customerInput',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    }
  },
}


触发 v-model 上的默认事件,v-model 内部会自己给传入的属性赋值:

@change="$emit('change', $event.target.value)"
@input="$emit('input', $event.target.value)"
@focus="$emit('focus', $event.target.value)"
@blur="$emit('blur', $event.target.value)"