单击时关闭 Vue.js 组件

Question

我目前正在做一个小项目，但我被卡住了，找不到我正在寻找的正确答案，所以也许有人可以帮我。

所以我有 2 个组件，其中父组件调用子组件，如下所示：

<open-pokemon
        v-if="open"
        :pokemon-name="clickedPokemon"
        :type="clickedPokemonType"
        >
</open-pokemon>

openPokemon 组件也有一个关闭按钮来关闭组件我想做的是从 dom 中删除组件，但是当再次调用 openPokemon 时它仍然需要渲染。

总之这里是关闭方法：

closePokemon: function (e) {
            document.getElementById(e).classList.add('close');
            self = this;
            self.$destroy();
            self.$el.parentNode.removeChild(self.$el);
        }

这是我的 html：

<div id="pokemon-single" class="c-pokemon__single-open" :class="type">
                    <div class="flex justify-end">
                        <button @click="closePokemon('pokemon-single')" class="c-pokemon__single-close">
                            X
                        </button>
                    </div>
                </div>

虽然这会起作用，但我似乎无法弄清楚为什么当我在父组件中再次调用它时无法重新呈现该组件。任何帮助，将不胜感激。如果您需要更多信息，请告诉我。

Answer 1

解决方案

单击关闭按钮时从 child 发出 close 事件。
侦听 parent 中的关闭事件并将 open 设置为 false。

Child（开放宝可梦）

<template>
  <div id="pokemon-single" class="c-pokemon__single-open" :class="type">
    <div class="flex justify-end">
      <button @click="close" class="c-pokemon__single-close">X</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    close () {
      this.$emit('close')
    }
  }
}
</script>

Parent

<template>
  <div>
    <open-pokemon
      v-if="open"
      :pokemon-name="clickedPokemon"
      :type="clickedPokemonType"
      @close="open = false"
    />
  </div>
</template>

单击时关闭 Vue.js 组件

Closing a Vue.js component on click

components

vue.js

解决方案

Child（开放宝可梦）

Parent