Vue 2.0 组件如何删除自身

Question

如题，我该怎么做

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

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

this.$delete(this)

Answer 1

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

中删除子组件

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

引自文档：

Conditionally render the element based on the truthy-ness of the expression value. The element and its contained directives / components are destroyed and re-constructed during toggles.

如果子组件是作为父组件上某些数据对象的一部分创建的，则必须通过 $emit 向父组件发送事件，修改（或删除）数据，子组件将消失在其自己的。最近还有一个问题：

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);

Answer 3

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

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

Answer 4

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

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

取自here

Vue 2.0 组件如何删除自身

how can component delete itself in Vue 2.0

vue.js

vue-component