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

【问题标题】：Update state in parent from slot in Vue从 Vue 中的插槽更新父级中的状态
【发布时间】：2020-04-19 14:05:46
【问题描述】：

我是 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>

在这个组件中，我将传递一个表单作为插槽，并且我希望能够在我提交表单时关闭模式。来自 React 背景，我只需传递一个函数，当我在插槽中提交表单时，该函数会将对话框变量设置为 false。我不知道如何在 Vue 中最好地做到这一点。我在 google 上找到的示例对于如此简单的操作来说似乎过于繁琐和过于复杂。

谢谢

【问题讨论】：

标签： javascript vue.js vuetify.js slot

【解决方案1】：

如果您了解更多关于插槽范围here 的信息，

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

由于您通过slot 传递您的form，因此您已经可以访问parent 组件实例。

另外，正如文档中提到的，它很好记

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

所以，当你编写组件时，

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

传递给form 的任何方法都可以访问父组件的state。

现在，如果您可以设置一个数据属性来切换父级中模态组件的可见性以及切换此属性的方法

data: () => {
  return {
    showModal: false //or true
  }
},
methods: {
  toggleModalVisibility() {
    this.showModal = !this.showModal;
  }
}

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

form @submit="toggleModalVisibility"

【讨论】：

【解决方案2】：

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

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

【讨论】：