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)"