你需要为 vue3 中的反应对象发出事件吗？

Question

我还没有真正理解 v-model 如何用于组件，请检查我的代码：

    <template>
      <a-form-item name="bananas" label="bananas">
        <a-input v-model:value="test.bananas" />
      </a-form-item>
    </template>
    
    <script>
    import { computed, defineComponent } from 'vue'
    
    export default defineComponent({    
      props: {
        formData: {
          type: Object,
          required: true
        }
      },
      setup(props) {
        const test = computed(() => props.formData)
        return { test }
      }
    })
    </script>

父组件中的 formData 是一个响应式对象

    <InnerComponent v-model:formData="formData" />

    const formData = reactive({
      name:'',
      .....
      bananas: 'bananas',
    })

这段代码“有效”，或者更确切地说，当输入“bananas”改变时，formData 对象似乎被更新了......但是如何？ 在组件中使用 v-model 读取文档我还应该为它定义一个更新函数，这也是一个对象，没有使用响应对象的示例

谁能解释一下？

所有这一切都是因为必须创建一个非常大的表单，我需要将各个部分划分为子组件，将反应对象传递给所有子组件

Answer 1

来自https://stackoverflow.com/a/65604790/197546

v-model 是 :value 和 @change 的语法糖
除了<input v-model="name">，您可以使用
<input :value="name" @update:model-value="v => name=v">

如果您使用v-model，则不需要使用发射器和侦听器。在 vue 3 中，您可以通过冒号定义指定您希望将此语法糖应用于哪个变量，就像您对 v-model:formData 所做的那样。这使得组件可以通过 v-model 获得多个变量，这对于更高级的组件设置非常有用。

如果您要传递 reactive 变量，则根本不需要使用 v-model，因为反应式暴露了 Vue 的内部结构，因此在 reactive 的情况下，反应性与父子交互分开处理.无论响应式是作为道具还是从全局引用传递给子级，响应式都将适用于所有实例。

附带说明，refs 不会以同样的方式允许这样做。虽然您仍然可以将它们作为全局传递，但将其作为道具传递是行不通的。它的行为就像一个常规的 prop，它会继续接收来自父级的更新，但本地更改不会传播到组件范围之外。