你需要为 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

来自

v-model is syntactical sugar for :value and @change
Instead of <input v-model="name">, you could use
<input :value="name" @update:model-value="v => name=v">

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

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

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

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

do you need to emit event for reactive objects in vue3?

vuejs3

vue-composition-api