Vue.js 如何在Vue 2.0中删除组件本身

作为标题，我该怎么做

从官方文档中可以看出，$delete可以使用参数“object”和“key”

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

this.$delete(this)

---

否，您将无法直接删除组件。父组件必须使用

v-if

从DOM中删除子组件

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

参考：

引自文件：

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

---

如果子组件是作为父级上某个数据对象的一部分创建的，则必须通过

$emit

向父级发送事件，修改（或删除）数据，子组件将自行消失。最近还有一个问题：

不，您将无法直接删除组件。父组件必须使用

v-if

从DOM中删除子组件

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

参考：

引自文件：

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

---

如果子组件是作为父级上某个数据对象的一部分创建的，则必须通过

$emit

向父级发送事件，修改（或删除）数据，子组件将自行消失。最近还有另一个问题：

我找不到关于完全删除Vue实例的说明，因此我得出以下结论：

module.exports={
...
方法：{
结束（）{
//销毁vue侦听器等
这个.$destroy（）；
//从DOM中删除元素
this.el.parentNode.removeChild（this.el）；
}
}
};

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

root

：

导出默认值{
设置（道具，{root}）{
常数关闭=（）=>{
root.$destroy（）；
root.$el.parentNode.removeChild（root.$el）；
};
返回{close}；
}
}

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

const instance=new Vue（{…}）；
...
实例。$destroy（）；
实例$el.parentNode.removeChild（实例$el）；

我找不到关于完全删除Vue实例的说明，因此我得出以下结论：

module.exports={
...
方法：{
结束（）{
//销毁vue侦听器等
这个.$destroy（）；
//从DOM中删除元素
this.el.parentNode.removeChild（this.el）；
}
}
};

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

root

：

导出默认值{
设置（道具，{root}）{
常数关闭=（）=>{
root.$destroy（）；
root.$el.parentNode.removeChild（root.$el）；
};
返回{close}；
}
}

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

const instance=new Vue（{…}）；
...
实例。$destroy（）；
实例$el.parentNode.removeChild（实例$el）；

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

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

您可以在组件上使用该方法，并使其从DOM中移除自身

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

---

我以前见过这个。感觉像是deja vue…我以前见过。感觉像是deja vue…谢谢你的提示。在我的情况下，虽然使用你的代码不起作用。我必须使用这个：

beforeDestroy（）{this.$el.parentNode.removeChild（this.$el）}，

你能不能给我一个提示，为什么在@bendytree建议的代码上使用

$root

？这取决于你的应用程序的架构，我现在想，如果页面上只有

$root

一个组件，那么你就需要使用

$root

，但是如果它是嵌套组件，那么你就不想使用

$root

。更重要的一点是使用

beforeDestroy

，它将在组件被自然销毁之前触发。谢谢提示。在我的情况下，虽然使用你的代码不起作用。我必须使用这个：

beforeDestroy（）{this.$el.parentNode.removeChild（this.$el）}，

你能不能给我一个提示，为什么在@bendytree建议的代码上使用

$root

？这取决于你的应用程序的架构，我现在想，如果页面上只有

$root

一个组件，那么你就需要使用

$root

，但是如果它是嵌套组件，那么你就不想使用

$root

。更重要的一点是使用

beforeDestroy

，它将在组件被自然销毁之前触发。为了删除DOM元素，我这样做了，并且效果很好：root.$el.remove（root.$el）；不需要“父节点”和“子节点”（节省的空间）。在FF/Chrome/SafariTo-remove-DOM元素上测试，我这样做了，效果很好：root.$el.remove（root.$el）；不需要“父节点”和“子节点”（节省的空间）。在FF/Chrome/Safari上测试