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

解决方案记录在 docs

您可以使用 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)
      }
    }
  }
})

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

multi-layer deep v-model data-binding in vue3

vue.js

vuex

vuejs3

来自文档的示例：