有一个destroy命令可以擦除组件：
完全销毁一个虚拟机。清理它与其他现有虚拟机的连接，解除所有指令的绑定，关闭所有事件监听器。触发beforeDestroy和destroyed钩子。
https://v2.vuejs.org/v2/api/#vm-destroy
但是如果你只想删除/隐藏一个或多个示例中的组件（即通过.$mount()或el: "#app"挂载的组件），你应该尝试通过v-if删除组件或通过v-show隐藏组件。
在示例模板中，这看起来像：

<my-component v-if="showMyComponent"></my-component>
<my-component v-show="showMyComponent"></my-component>

v-show将只设置display:none，而v-if将以与$destroy()相同的方式从DOM中删除组件。https://v2.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

必须使用本地数据属性，并在指令v-show和v-if中使用in

<div id="application">
    <vm-test v-if="active"></vm-test>
    <div @click="toggle()">toggle</div>
</div>

Vue.component('vm-test', {
    template: '<div>test</div>'
});

var vm = new Vue ({
    el: "#application",
    data: function() {
        return {
            active:true
        }
    },
    methods: {
        toggle: function() {
            this.active = !this.active;
        }
    }
})

https://jsfiddle.net/99yxdacy/2/

v-if可以用于此目的。但如果你正在玩父子组件，那么它可能有点棘手。
因此，当父组件加载时，使用v-if隐藏子组件，并传递props以显示或隐藏子组件。
In my parent component：hideStudentSection作为props传递。传递了一个名为navToParent的事件。当调用从子组件返回时，navToParent将用于重置props。

<div class="container-fluid" v-if="nav.students">
    <div class="row">
        <students
          @navToParent="navToParent"
          :hideStudentSection="nav.hideStudentSection"
        />
    </div>
    <div @click="navToChild"> </div>
  </div>
export default defineComponent({
...
method() {
   navToChild() {
      this.nav.hideStudentSection = false;
      this.nav.students = true;
   },
   navToParent() {
      this.nav.hideStudentSection = true;
      this.nav.students = false;      
   }
}
})

In my child component：（注：我只展示了相关的代码）。你可以使用mount来处理你的东西

<template>
  <div class="col-12" v-if="!hideStudentSection">
  </div>
<div @click="back">back to Parent</div>
</template>

export default defineComponent({
...
...
props: ["hideStudentSection"],
emits: ["navToParent"],
mounted() { 
  // use mounted to handle your stuff
},
methods: {
    back() {
      this.$emit("navToParent");
    },
}
});