使用defineModel宏不会触发Vue.js中的状态更新

Question

请在下面的链接中找到我试图在 Vue 中实现的事情类型的最小示例。

在我的实际应用程序中，我的商店中维护着几条数据，它们需要相同的输入格式。因此，我想创建一个通用输入表单，它将接收来自父组件的值，并在它们之间创建双向绑定，更新主组件中的存储。此设置意味着我不能简单地更新子组件中的存储，因为我不知道在输入组件的级别输入组件正在管理哪个存储值。

但是，当我按照提供的示例进行设置时，当输入中的值发生变化时，存储永远不会更新。我不明白这是为什么。

Answer 1

您也需要使商店具有反应性，因此在您的

Store.js

:

import { reactive} from 'vue'
const Store = reactive({
  name: {
    firstName: "Bill",
    lastName: "Gates"
  }
})
...