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

Question

作为标题，我该怎么做

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

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

this.$delete(this)

原文由 Ciao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

引用自文档：

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

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

原文由 Mani 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 bendytree 发布，翻译遵循 CC BY-SA 4.0 许可协议