官网其实讲的很通透了，但是有一个点就是很奇怪，按照默认的写，有的时候就会不生效，不知道为什么，这个不好测试出来
个人建议还是把model这个选项一起写上
基础数据类型实现v-model
父组件
<template>
<div>
这是父组件：{{value}}
<ModelTest v-model="value"></ModelTest>
</div>
</template>
<script>
import ModelTest from "@/ModelTest";
export default {
name: 'EmptyHome',
components: {ModelTest},
data(){
return{
value: '666'
}
}
}
</script>
<style scoped lang="scss">
</style>
ModelTest.vue
<template>
<div>
<input v-model="inputValue"/>
</div>
</template>
<script>
export default {
name: "ModelTest",
model:{ // 建议显示把这个写上
event:'update:value',
prop: 'value'
},
props:{
value:{
type:String
}
},
data(){
return{
inputValue: ''
}
},
watch:{
inputValue(){
this.$emit('update:value',this.inputValue)
}
}
}
</script>
<style scoped lang="scss">
</style>
引用数据类型实现v-model
引用数据类型其实就是对象了，vue是不允许直接修改props的，你直接修改props，vue就会给你警告哈
但是如果你的props是一个对象，你修改对象里面的值，vue是不会给你警告的
父组件
<template>
<div>
这是父组件：{{value}}
<ModelTest v-model="value"></ModelTest>
</div>
</template>
<script>
import ModelTest from "@/ModelTest";
export default {
name: 'EmptyHome',
components: {ModelTest},
data(){
return{
value: {value: '666'}
}
}
}
</script>
<style scoped lang="scss">
</style>
ModelTest.vue
<template>
<div>
<input v-model="inputValue"/>
</div>
</template>
<script>
export default {
name: "ModelTest",
props:{
value:Object
},
data(){
return{
inputValue: ''
}
},
watch:{
inputValue(){
this.value.value = this.inputValue
// this.$emit('input',this.inputValue)
}
}
}
</script>
<style scoped lang="scss">
</style>
结果
控制台不仅没有警告，而且还是双向绑定的😊
但是如果你要直接修改这个引用，那么一样会给你警告🙃，所以你要修改引用的时候还是和基础一样，要实现一下model的方法
最后
vue2中model只能有一个，sync进行了补充，在vue3中，v-model就可以有多个了，就是使用参数进行区分，实现也不太一样，迁移的时候还是需要注意的
欢迎关注公众号致心空间：O(∩_∩)O😁
