Javascript 从Vue中的插槽更新父级中的状态

我是Vue的新手，目前遇到了一个问题。我在项目中使用Vuetify，我有一个v-dialog组件，其插槽如下：

<template>
  <v-row>
    <v-dialog v-model="dialog" max-width="600px">
      <template v-slot:activator="{ on }">
        <v-btn class="ma-3" color="info" v-on="on">{{ text }}</v-btn>
      </template>
      <slot></slot>
    </v-dialog>
  </v-row>
</template>

{{text}}

在这个组件中，我将传递一个表单作为插槽，并且我希望在提交表单时能够关闭模式。来自React后台，我只需传递一个函数，当我在插槽中提交表单时，该函数将对话框变量设置为false。我不知道在Vue中如何最好地实现这一点。我在谷歌搜索时发现的例子对于这样一个简单的操作来说似乎太过分和复杂了

---

谢谢

如果您希望家长关闭对话框，那么您应该（可能）让家长负责打开对话框。否则，最终可能会导致组件为了控制权而相互争斗

---

这很容易做到。让父级向自定义组件传递一个属性，以启用或禁用对话框。由于父级还将窗体作为插槽提供，因此父级可以处理来自该窗体的事件并正确设置属性。

如果您阅读了有关插槽范围的更多信息

该插槽可以访问与模板其余部分相同的实例属性（即相同的“范围”）

由于您正在通过

插槽

传递

表单

，因此您已经可以访问

父组件实例

此外，正如文档中提到的，记住这一点很好

父模板中的所有内容都在父范围内编译；子模板中的所有内容都在子范围中编译

因此，当您编写组件时

<template>
  <ModalComponent>
    <form @submit="toggleModalVisibility"> 
      ...
    </form>
  </ModalComponent>
</template>

您只需将此方法分配给表单的onSubmit处理程序即可

form @submit="toggleModalVisibility"

form @submit="toggleModalVisibility"