开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情
<input v-model="str" />
// 等同于
<input :value="str" @input="str = $event.target.value" />
通过上面的代码，我们可以分析得出，也就是说： v-model="str" 是 :value="str" @input="str = $event.target.value" 的缩写。
解释：
$event 指代当前触发的事件对象。
$event.target 指代当前触发的事件对象的dom
$event.target.value 就是当前dom的value值
在@input方法中，value => str
在:value中：str => value
如此，形成了一个闭环，也就是所说的数据的双向绑定。
自定义组件怎么实现v-model
<my-component v-model="price"></my-component>
我们可以根据规则来拆解
<my-component :value="price" @input="price = $event.target.value"></my-component>
那么我们再还原组件的封装
<template>
<div>
<input type="text" :value="value" @input="$emit('input', $event.target.value)">
</div>
</template>
<script>
export default {
props: {
value: String
}
}
</script>
看到上面的代码或许你就恍然大悟了，他又回到了，我们了解的 父子组件的来回传值。
细心的人可能会发现，我们 props 里面的值是 value 那我能不能随便定义一个变量呢？还有 $emit()里面传入的事件值是input我能不能也随便定义一个事件呢？
当我们在一个自定义组件上使用v-model并不能实现双向绑定，因为自定的组件并没有默认的value和input事件，在使用时，我们需要按照上面那样显式的去声明定义这些东西。这时，model选项就派上用场了，在定义组件的时候，指定prop的值和监听的事件。
组件的用法是不变的，子组件可以这么写
<template>
<div>
<input type="text" :value="xxxx" @input="$emit('xxxx', $event.target.value)">
</div>
</template>
<script>
export default {
model:{
prop:'xxxx',
event:'xxxx' // 代表自定义的事件名称
}
props: {
xxxx: String // 代表自定义的变量名称
}
}
</script>
这就是vue 的 model 选项的作用。
以上是vue2.0的v-model语法糖讲解，vue3.0是怎么用的呢？
其实vue3的v-model跟vue2的使用区别不大，只是跟vue2的 sync 修饰符进行了合并，所以在vue3中就移除了 sync 修饰符。下面我们看看怎么在 composition api
中怎么写 v-model
// 自定义一个TestModel组件
<template>
<div>
<input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</div>
</template>
<script>
export default {
props: {
modelValue: {
type: String
}
}
}
</script>
在vue3中默认的不在是value 而是modelValue
然后在其他页面使用
<template>
<h1>vue3中使用v-model {{msg}}</h1>
<testModel v-model="msg"></testModel>
<!-- 等同于下面语法 默认传入一个modelValue 然后子组件接收这个modelValue -->
<testModel :modelValue="msg" @update:modelValue="msg = $event"></testModel>
</template>
<script>
import { ref } from 'vue';
import testModel from './TestModel.vue';
export default {
components: {
testModel
},
setup(){
const msg = ref('')
return { msg }
},
}
</script>
有的小伙伴可能有疑问，如果我不想用 modelValue 怎么办呢？当然也可以写成其他的名字
// 父组件
<template>
<h1>vue3中使用v-model {{msg}}</h1>
<testModel v-model:msg="msg"></testModel>
</template>
子组件接收的props就要改成msg了
// 子组件
<template>
<div>
<input type="text" :value="msg" @input="$emit('update:msg', $event.target.value)" />
</div>
</template>
<script>
export default {
props: {
msg: {
type: String
}
}
}
</script>
当然提到双向绑定，你可能第一时间就会想到表单元素，双向绑定不一定是表单元素，你可以定义各种各样的组件，比如通过click事件改变父组件的值
// 父组件
<template>
<div>{{count}}</div>
<testModel v-model:count="count"></testModel>
</template>
<script>
export default {
components: {
testModel
},
setup(){
const count = ref(0)
return { count }
}
}
</script>
// 子组件
<template>
<!-- 一定是+1 不是+=1 或者++ 否则vue会触发一个不让子组件直接改变props的警告 -->
<div @click="$emit('update:count', count + 1)">click me count + 1！</div>
</template>
<script>
export default {
props: {
count: {
type: Number
}
}
}
</script>
