Question

作为标题，我该怎么做

来自官方文档的

告诉我们$ delete可以使用参数＆＃39; object＆＃39;和＆＃39;关键＆＃39;

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

this.$delete(this)

Answer 1

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

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

引自文档：

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

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

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

您可以在组件本身的第一个v-if标记上使用<div>，而不是从其父级中删除您的组件。这会在您的页面中留下一个空组件，这不是最佳做法，但可能会避免处理来自父级的事件。

Answer 4

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

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

如何在Vue 2.0中删除组件

4 个答案: