一个组件上的 v-model
默认会利用名为 value
的 prop
和名为 input
的事件
Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > ` })
<custom-input v-model="searchInput"></custom-input>
但是像单选框、复选框等类型的输入控件可能会将 value
作为服务器提交时的内容,可以通过 mode
来指定其他属性
Vue.component('custom-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" > ` })
<custom-checkbox v-model="selectFramework"></custom-checkbox>
vue3
v-model prop 和事件默认名称已更改:
prop属性:value 变为-> modelValue;
event事件:input 变为-> update:modelValue;
在 3.x 中,自定义组件上的 v-model
相当于传递了 modelValue
prop 属性并接收抛出的 update:modelValue
事件:
Vue.component('custom-input', { props: ['modelValue'], template: ` <input v-bind:value="modelValue" v-on:input="$emit('update:modelValue', $event.target.value)" > ` })
<custom-input v-model="searchInput"></custom-input>
v-model参数新增
若需要更改 model 名称,而不是更改组件内的 model
选项,那么现在我们可以将一个参数传递给 model:
Vue.component('custom-checkbox', { props: { checked: Boolean }, template: ` <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('update:checked', $event.target.checked)" > ` })
<custom-checkbox v-model:checked="selectFramework"></custom-checkbox>
我们在上面的代码中可以看到 v-model
后面加上了冒号传递参数 :checked
,表示 v-model 绑定的是 checked
属性,在触发的事件通过 update:属性
指定,注意格式是固定的,必须 update:
加上属性名称。
sync修饰符删除
如果需要的话,父级可以监听该事件并更新本地 data property。例如:
<custom-checkbox :checked="selectFramework" @update:checked="selectFramework = $event"></custom-checkbox>
为了方便起见,我们可以使用 .sync
修饰符来缩写,如下所示:
<custom-checkbox :checked.sync="selectFramework"></custom-checkbox>
vue3 中 bind 的 .sync
修饰符和组件的 model 选项已移除,统统都要使用 v-model 作为代替;
<custom-checkbox v-model:checked="selectFramework"></custom-checkbox>
而且允许我们在自定义组件上使用多个 v-model。
<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" /> <!-- 简写: --> <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" :content="pageContent" @update:content="pageContent = $event" />
之前是自定义组件上只能使用一个,现在改为可以使用多个了。