简介
v-model "指令是Vue.js捆绑的少数几个指令之一。该指令允许在数据和视图之间进行双向数据绑定。
有了双向数据绑定，当我们通过输入字段或其他控件更新数据时，就可以修改 DOM（文档对象模型)，而无需进行 DOM 工作。
在本文中，您将了解该指令的工作原理，并将其用于自己的组件。
了解 v-model 的内部工作原理
根据我们对 HTML 的了解，我们知道 "输入"、"选择 "和 "文本框 "是我们向应用程序提供数据的主要方式。
要使 v-model 正常工作，它需要相关元素或组件接收一个道具（默认值为 value)并发出一个事件（默认值为 input)。
Vue 会根据元素决定如何监听和处理数据。对于 input 元素，可以这样使用 v-model：
1<input v-model="email" />
v-model` 翻译成这样：
1<input :value="email" @input="e => email = e.target.value" />
Vue 使用此扩展来处理 textarea、select 和其他一些 input 类型。
对于单选按钮和复选框，Vue 使用它们的 checked 命题并监听它们的 change 事件。
对于可接受多个值的 select 标记和复选框等元素，Vue 会自动返回一个包含所选值的数组。
将 v-model 添加到自定义组件中
为了让我们的组件支持 v-model 双向绑定，组件需要接受一个 value prop 并发出一个 input 事件。
让我们创建一个名为 "basic-input "的示例组件。我们将使用 Vue 的 single file component：
1[label basic-input.vue]
2<template>
3 <input @input="handleInput" />
4</template>
5
6<script>
7export default {
8 prop: ['value'],
9 data () {
10 return {
11 content: this.value
12 }
13 },
14 methods: {
15 handleInput (e) {
16 this.$emit('input', this.content)
17 }
18 }
19}
20</script>
为支持 "v-模型"，该组件接受一个 "值 "道具，并发出一个 "输入 "事件。
像这样使用组件
1<basic-input v-model="email" />
这样，自定义组件就能支持 v-model 双向绑定。
自定义 v-model``prop 和 event
让我们更进一步。我们可能不想使用默认的 event 和 prop 来为我们的组件添加 v-model 支持。值得庆幸的是，Vue 允许我们对其进行自定义。
要自定义 event 和 prop，我们要在组件中添加一个 model` 属性，并像这样定义新值：
1[label basic-input.vue]
2// ...
3
4export default {
5 prop: ['hidden'],
6 model: {
7 prop: 'hidden',
8 event: 'blur'
9 }
10 methods: {
11 handleInput (value) {
12 this.$emit('blur', value)
13 }
14 }
15}
16
17// ...
这一次，当你像这样使用组件时：
1<basic-input v-model="email" />
Vue 会自动将其转换为
1<basic-input :hidden="email" @blur="e => email = e.target.value" />
有了这一点，在定义组件的道具和事件时就可以避免冲突。
在 contenteditable 上使用 v-model
内容可编辑](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content) 元素是一个 div 或类似元素，可配置为输入。
我们通过在元素中添加 contenteditable 属性来定义内容可编辑元素：
1<div class="editor" contenteditable="contenteditable"></div>
您将在所见即所得编辑器中使用内容可编辑元素，因为它们更容易操作，而且被大量浏览器所支持。
v-model 可用于内容可编辑的元素，但需要明确使用元素的内容，否则将无法发射内容。
要发射内容，您需要抓取 div 的 innerText 或 innerHTML 内容。因此，我们的 updateInput 方法需要如下所示：
1updateInput () {
2 this.$emit('input', this.$el.innerText)
3}
您也可以使用 ref 的内容来代替根元素的内容。
这样，v-model 就可以用于内容可编辑元素了。您也可以在 updateInput 方法中更新 this.content 。
结论
现在，您已经了解了如何在自定义 Vue 组件中使用 v-model，可以开始构建或重构需要使用 v-model 的组件了。
如需进一步阅读，请参阅v-model的官方文档，或查看Vue.js 主题页，了解更多练习或项目。