如何在Vue 2.0中删除组件

Question

作为标题,我该怎么做

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

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

this.$delete(this)

Answer 1

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

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

引自文档:

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

如果子组件是作为父级上的某个数据对象的一部分创建的,则必须通过$emit,修改(或删除)数据向父级发送事件,子组件将自行消失.最近有另一个问题:删除一个Vue子组件

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

Answer 3

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

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