当前位置: 首页 > 工具软件 > v-page > 使用案例 >

在组件上使用 v-model

姬成荫
2023-12-01

一个组件上的 v-model 默认会利用名为 valueprop 和名为 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"
/>

之前是自定义组件上只能使用一个,现在改为可以使用多个了。

 类似资料: