Vue 2.0 中的组件如何自行删除答案

【问题标题】：how can component delete itself in Vue 2.0Vue 2.0 中的组件如何自行删除
【发布时间】：2020-11-02 07:35:15
【问题描述】：

作为标题，我该怎么做

从官方文档中告诉我们 $delete 可以使用参数 'object' 和 'key'

但我想像这样自己删除一个组件

this.$delete(this)

【问题讨论】：

我以前见过这个。感觉就像似曾相识……

标签： vue.js vue-component

【解决方案1】：

不，您将无法直接删除组件。父组件必须使用v-if 从 DOM 中移除子组件。

参考：https://vuejs.org/v2/api/#v-if

引用自文档：

根据表达式值的真实性有条件地渲染元素。元素及其包含的指令/组件在切换期间被销毁和重建。

如果子组件是作为父数据对象的一部分创建的，您必须通过$emit 向父组件发送事件，修改（或删除）数据，子组件将自行消失。最近还有一个问题：Delete a Vue child component

【讨论】：

这仅适用于我们谈论的组件确实具有父组件的情况。但是对于使用 new Vue() 从 js 手动创建的根组件，我假设 @bendytree's answer 是要走的路。

【解决方案2】：

我找不到关于完全删除 Vue 实例的说明，所以我总结了一下：

module.exports = {
  ...
  methods: {
    close () {
      // destroy the vue listeners, etc
      this.$destroy();

      // remove the element from the DOM
      this.$el.parentNode.removeChild(this.$el);
    }
  }
};

Vue 3 基本相同，但您可以使用上下文参数中的root：

export default {
  setup(props, { root }){
    const close = () => {
      root.$destroy();
      root.$el.parentNode.removeChild(root.$el);
    };
    return { close };
  }
}

在 Vue 2 和 Vue 3 中，您都可以使用您创建的实例：

const instance = new Vue({ ... });
...
instance.$destroy();
instance.$el.parentNode.removeChild(instance.$el);

【讨论】：

要删除 DOM 元素，我这样做了，效果很好： root.$el.remove(root.$el);不需要“parentNode”和“Child”（节省空间）。在 FF/Chrome/Safari 上测试
我该如何实现this.$delete(object, key)？

【解决方案3】：

您可以在组件上使用beforeDestroy 方法，并将其从DOM 中移除。

beforeDestroy () {
  this.$root.$el.parentNode.removeChild(this.$root.$el)
},

【讨论】：

感谢您的提示。就我而言，尽管使用您的代码不起作用。我不得不使用这个：beforeDestroy () { this.$el.parentNode.removeChild(this.$el) }, 你能否给我一个提示，为什么你使用$root 而不是@bendytree 提出的代码？
这取决于您的应用程序的体系结构，我想现在如果它是页面上唯一的组件，但如果它是嵌套组件，那么您需要使用 $root你不会想使用$root。更重要的是使用beforeDestroy，它将在组件自然销毁之前触发

【解决方案4】：

如果您只需要完全重新渲染组件，您可以将更改的key 值绑定到组件<MyComponent v-bind:key="some.changing.falue.from.a.viewmodel"/>

因此，随着 key 值的变化，Vue 将销毁并重新渲染您的组件。

取自here

【讨论】：