在 Vue3 中关闭模态

Question

我只想知道如何在 vue3 中关闭模态框。我可以打开它，但我不知道如何关闭它....

这是我的代码：

搜索栏:

    <template>
  <div class="search">
    <input placeholder="Search for a recipe" />
    <button @click="showModal = true">Add a new recipe</button>
    <modal v-if="showModal" @close="showModal = false">
      <RecipeForm />
    </modal>
  </div>
</template>

<script>
import RecipeForm from "./RecipeForm.vue";
export default {
  name: "SearchBar",
  components: {
    RecipeForm,
  },
  props: {},

  data() {
    return {
      showModal: false,
    };
  },
};
</script>

我在 SearchBar 组件上有一个按钮。当我按下按钮时，模态显示另一个名为 RecipeForm 的组件。

打开 RecipeForm 时，它有另一个按钮可以关闭它，但我不知道该怎么做。

配方表

<button @click="$emit('close')">
          <img src=@/assets/close-button.svg>
        </button>

我的错误在哪里？

谢谢

Answer 1

您的 RecipeForm 正在发出信号，您正在尝试收听来自 modal 而不是来自 RecipeForm 的发出信号。将 @close="showModal = false" 从 modal 组件移动到 RecipeForm

<template>
  <div class="search">
    <input placeholder="Search for a recipe" />
    <button @click="showModal = true">Add a new recipe</button>
    <modal v-if="showModal">
      <RecipeForm @close="showModal = false" />
    </modal>
  </div>
</template>

在 Vue3 中关闭模态

Close Modal in Vue3

vuejs3