从使用上看
在 Vue2 中, v-model其实是一个语法糖,它背后本质上是包含两个操作:
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件
<!-- Vue 2 -->
<search-input v-model="searchValue"><search-input>
<!-- 相当于 -->
<search-input :value="searchValue" @input="searchValue=$event"><search-input>
在 Vue3 中, 在自定义组件上使用v-model, 在vue2的基础上还相当于传递一个modelValue
属性, 同时触发一个update:modelValue
事件:
<modal :modelValue=“isVisible” @update:modelValue=“isVisible = $event”>
如果要绑定属性名, 只需要给v-model传递一个参数就行, 同时可以绑定多个v-model:
<modal v-model:visible="isVisible" v-model:content="content"></modal>
<!-- 相当于 -->
<modal
:visible="i