v-model

v-model 的默认名称

2.x

在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件：

<ChildComponent v-model="pageTitle" />

<!-- 简写 -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

3.x

在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

<ChildComponent v-model="pageTitle" />

<!-- 简写 -->
<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event" />

修改 v-model 的默认名称

2.x

如果想要更改 prop 或事件名称，则需要在 ChildComponent 组件 中添加 model 选项：

ChildComponent

export default {
  model: {
    prop: 'title',
    event: 'change',
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title',
    },
  },
}

ParentComponent

<ChildComponent v-model="pageTitle" />

<!-- 简写 -->
<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

3.x

若需要更改 model 的名称，可以为 v-model 传递一个参数：

ChildComponent

defineProps(['title'])
defineEmit(['update:title'])

ParentComponent

<ChildComponent v-model:title="pageTitle" />

<!-- 简写 -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

多个 v-model

2.x

在某些情况下，我们可能需要对某一个 prop 进行“双向绑定”(除了已经使用了 v-model 绑定 prop 的情况)。

ChildComponent

export default {
  props: ['title'],
  methods: {
    updateTitle() {
      this.$emit('update:title', newValue)
    },
  },
}

ParentComponent

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

<!-- 简写 -->
<ChildComponent :title.sync="pageTitle" />

3.x

v-model 传递参数也可以作为 Vue 2 中 .sync 修饰符的替代，允许我们在自定义组件上使用多个 v-model。

ChildComponent

defineProps(['title', 'content'])
defineEmit(['update:title', 'update:content'])

ParentComponent

<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>

<!-- 简写 -->
<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />