vue3 中的多层深度 v 模型数据绑定

Question

假设我有两个组件，其中一个只是一个简单的输入：

<!-- Child.vue -->
<template>
    <input v-model="value" />
</template>

现在假设我有一个父元素，并且我想使用 v-model 绑定子输入的value.

伪代码：

<!-- Form.vue -->
<template>
    <Child v-model:value="parentVariable"/>
</template>

这样子组件的输入值就存在于子组件的状态之外。（或者它同时存在于两者中并且结合在一起。）

问题是如何将父组件中的变量双向数据绑定到子组件中的输入？

（我使用的是vue3）（如果有最佳实践，请告诉我。）

Answer 1

文档中记录了解决方案

您可以使用emit和props传播v-model到父组件

文档中的示例：

app.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input v-model="value">
  `,
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
})