今天看vue api官方文档，看见选项/其他下的model有点看不懂，后面自己查资料实现了一下才明白用法。
实现全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试Vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id='root'>
<my-input v-model='name' value='sad'></my-input>
</div>
</body>
<script>
Vue.component('my-input', {
template: `<input type="text" :value="username" @input="updateVal($event.target.value)">`,
model: {
prop: 'username',
event: 'changeUsername'
},
props: {
username: {
type: String,
default: 'qwer'
}
},
methods: {
updateVal(val) {
// 监听input事件，当input框发生改变，触发事件给父组件，完成父组件的绑定值的改变 以实现双向绑定
this.$emit('changeUsername', val)
}
},
watch: {
username(newVal, oldVal) {
console.log(newVal)
}
}
})
var app = new Vue({
el: '#root',
data() {
return {
name: 'hello'
}
},
})
</script>
</html>
其中
<my-input v-model='name' value='sad'></my-input>
//相当于
<my-input
:username="name"
@changeUsername="val => { name= val }"
value="sad">
</my-input >
得到的结果是：
结论：
其实v-model只是一种语法糖，如官方所述：
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
