Question

我是Vue的新手，目前正陷入一个问题。我在项目中使用Vuetify，并且有一个v-dialog组件，其插槽如下所示：

 places  years  n
 1   London 2019    2
 2   London 2020    1
 3   Paris  2019    2
 4   Paris   2020    NA  # or better 0
 5   Rennes  2019    NA  # or better 0
 6   Rennes 2020    1

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

谢谢

Answer 1

如果您详细了解广告位范围here，则

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

自从您通过form传递slot以来，您已经可以访问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"

Answer 2

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

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

从Vue中的广告位更新父项中的状态

2 个答案: