这个系列的目的是发布关于高级Vue概念的技巧和窍门，这些技巧可以快速应用于每一个应用程序，并且为解决问题提供新的方法。
在本短文中，我将解释v-model的工作原理，并展示如何将其应用到每一个Vue组件中。
理解v-model v-model是几乎每个Vue应用程序中都会用到的常见指令。它通常用于在表单元素上启用双向数据绑定，非常适用于input、checkbox、select、textarea和radio等元素。
在下面的例子中，v-model应用于input元素，将someVal变量与input的原生value属性进行绑定：
<input v-model="someVal">
然后该指令监听原生input事件，并在每次事件触发时更新someVal的值。
因此，我们可以将上述代码重写为使用常见的事件和props，达到相同的效果：
<input
v-bind:value="someVal"
v-on:input="someVal = $event.target.value"
>
这就是v-model在普通input上的工作原理。
了解了这一点，我们可以在每个能够触发input事件并接受value prop的组件上使用v-model。
例如，看看这个MagicCounter组件：
<template>
<div>
<button @click="changeValue(value-1)">-</button>
<span>{{ value }}</span>
<button @click="changeValue(value+1)">+</button>
</div>
</template>
<script>
export default {
props: ["value"],
methods: {
changeValue(newVal) {
this.$emit("input", newVal);
}
}
};
</script>
由于我们每次改变时都会发出input事件并接受value prop，所以可以安全地在此组件上使用v-model指令：
<MagicCounter v-model="count" />
与自定义组件一起使用v-model 尽管input和value对是v-model的默认设置，但根据输入类型，这些绑定可能会有所不同（强烈建议查看其源代码以获取详细信息）。例如，在checkbox元素中，将使用checked属性和change事件，而不是默认的。
事实证明，我们可以通过model属性来定制v-model指令接受的事件/prop对。例如，这是checkbox元素可能的定制方式：
model: {
prop: 'checked',
event: 'change'
}
你可能希望修改MagicCounter组件发出的事件名称以使其更具描述性（例如修改为modified）。
让我们看看如何让这个自定义事件与v-model一起工作：
<template>
<div>
<button @click="changeValue(value-1)">-</button>
<span>{{ value }}</span>
<button @click="changeValue(value+1)">+</button>
</div>
</template>
<script>
export default {
props: ["value"],
model: {
event: `modified`
},
methods: {
changeValue(newVal) {
this.$emit("modified", newVal);
}
}
};
</script>
嗯，现在你知道了如何在每个Vue组件中使用v-model了。希望你能尽快找到使用这些知识的方法。
