在 Vue.js 中，一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。但是像单选框、复选框等类型的输入控件可能会将 value 属性用于不同的目的。model 选项可以用来避免这样的冲突，例如：
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)">
`
})现在在这个组件上使用 v-model 的时候：
<base-checkbox v-model="lovingVue"></base-checkbox>
这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。
注意：注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue</title>
<!-- 使用 CDN 引入 Vue 库 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script>
</head>
<body>
<div id="app">
<h1>lovingVue = {{ lovingVue }}</h1>
<base-checkbox v-model="lovingVue"></base-checkbox>
</div>
<script type="text/javascript">
Vue.component('base-checkbox', {
// 定义 v-model 默认的属性名和事件
model: {
prop: 'checked',
event: 'change'
},
props: {
// 1.父组件传值给子组件
// 将 lovingVue 的值传递给该 checked
checked: Boolean
},
// 2.子组件将值传递给父组件
// 通过 v-bind:checked 将 checked Prop 绑定到 checked 属性
// 通过 v-on:change 将当前复选框的 checked 传递给父组件
template: `
<label>
<input type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)" /> 复选框
</label>
`
});
var app = new Vue({
el: "#app",
data: {
lovingVue: null
}
});
</script>
</body>
</html>运行效果如下图：
川公网安备51010802032098
