Vue 挂载组件移除 div

Question

我正在尝试在一个函数上安装一个组件，它工作正常。但是我已经对其进行了设置，以便它在 X 秒后销毁 div。然后，当我尝试再次添加组件时，它删除了基本 div。我不确定如何解决这个问题......

组件：

<template>
  <div>
    <b-alert show dismissible variant="danger">
        <i class="mdi mdi-block-helper mr-2"></i>{{ text }}
    </b-alert>
    </div>
</template>

<script>
 export default {
    name: "alertDanager",
    props: {
    text: null
    },
    created() {
        setTimeout(() => this.destoryEl(), 5000);
    },
    methods: {
        destoryEl() {
            this.$destroy();
            this.$el.parentNode.removeChild(this.$el);
        }
    }
};
</script>

在

中生成组件

const DangerAlertExtended = Vue.extend(dangerAlert);
const error = new DangerAlertExtended({ propsData: { text: "Error message" } });
error.$mount("#error");

我不知道如何让它停止覆盖#error div...

Answer 1

为什么不让v-if 将其从 DOM 中排除，而不是移除元素？或者，它可以被隐藏，但使用v-show 保留在 DOM 中（这可能是我会做的，除非有特定原因需要它不在 DOM 中）。我认为通常让 Vue 管理 DOM 比自己操作要好。

<template>
  <div v-if="showAlert">
    <b-alert show dismissible variant="danger">
        <i class="mdi mdi-block-helper mr-2"></i>{{ text }}
    </b-alert>
    </div>
</template>

<script>
 export default {
    name: "alertDanager",
    props: {
        text: null,
        showAlert: true
    },
    created() {
        setTimeout(() => this.hideAlert(), 5000);
    },
    methods: {
        hideAlert() {
            this.showAlert = false
        }
    }
}
</script>