官方文档地址
v-model大多用于input组件,默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的
可以使用组件的model来自定义prop和事件
自定义checkbox组件
<template>
<div>
<label>我是label</label>
<input type="checkbox" v-on:change="$emit('callBack', $event.target.checked)" v-bind:checked="c" />
</div>
</template>
<script>
export default {
name: "ModelDemo",
props: {
c: Boolean
},
model: {
prop: 'c',
event: 'callBack'
},
}
</script>
父组件
<template>
<div>
<model-demo v-model="checked" ></model-demo>
</div>
</template>
<script>
import ModelDemo from "@/components/ModelDemo";
export default {
name: "home",
components: {
ModelDemo
},
data: () => ({
checked: true
}),
watch: {
checked(n, o){
// eslint-disable-next-line no-console
console.log(n)
// eslint-disable-next-line no-console
console.log(o)
}
}
}
</script>
父组件中通过v-model将data中的checked传给自定义组件,自定义组件通过model的prop属性将接收到的checked赋值给props的c,自定义组件再通过v-bind将input标签的checked和props的c进行绑定。
自定义组件中model的event是一个回调函数,当checkbox状态发生变化时,会执行这个回调函数,并将状态传给父组件v-model绑定的checked
下面是vue处理model的源码,中文注释为笔者自己加的
// transform component v-model info (value and callback) into
// prop and event handler respectively.
function transformModel (options, data) {
var prop = (options.model && options.model.prop) || 'value';//如果没有设置model.prop,默认取名为value的prop
var event = (options.model && options.model.event) || 'input'//如果没有设置model.event,默认取名为input的事件回调函数
;(data.attrs || (data.attrs = {}))[prop] = data.model.value;
var on = data.on || (data.on = {});
var existing = on[event];
var callback = data.model.callback;
if (isDef(existing)) {
if (
Array.isArray(existing)
? existing.indexOf(callback) === -1
: existing !== callback
) {
on[event] = [callback].concat(existing);
}
} else {
on[event] = callback;
}
}