自定义v-model，原来这么简单

发表于 更新于 分类于

在用 Vue 开发前端时，不论使用原生还是封装好的 UI 库，对于表单组件，一般都会使用到 v-model。虽然 v-model 是一个语法糖，但是吃到嘴里挺甜的啊。学会自定义 v-model，还是很有必要的。

基本用法

一个组件上的 v-model 默认是通过在组件上面定义一个名为 value 的 props，同时对外暴露一个名为 input 的事件。

源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="custom-input">
    <input :value="value" @change="$_handleChange" />
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        default: ""
      }
    },
    methods: {
      $_handleChange(e) {
        this.$emit("input", e.target.value);
      }
    }
  };
</script>

使用方式：

1
<custom-input v-model="text"></custom-input>