Vue自定义input组件

写表单经常会用到input, 使用第三方库比如element ui都封装好了, 我们拿来直接写

 <el-input v-model="text" />

或者原生HTML

<input v-model="text" />

如果第三方库的input组件不满足设计需求, 而且多个页面都需要input组件, 那么我们就有必要自定义一个input组件了.

自定义input组件

<template>
  <div>
    <input
      type="text"
      :value="value"
      @input="handleInput($event.target.value)"
    />
  </div>
</template>

<script>
export default {
  name: 'Input',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: ['value'],
  methods: {
    handleInput(text) {
      this.$emit('input', text);
    }
  }
};
</script>

使用的时候

<template>
  <div>
    <MyInput v-model="text" />
  </div>
</template>

<script>
import MyInput from "./components/input"
export default {
  name: 'Home',
  data() {
    return {
      text: ''
    };
  },
};
</script>

参考文档:
https://cn.vuejs.org/v2/api/#model

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event.