Question

我的网站会覆盖特定的DOM，而不是要求加载页面。有时，在DOM内部会有一些Vue.js组件（都是单页组件），这些组件将被覆盖。它们中的大多数都驻留在为构建组件而创建的应用程序中。

两个问题：

我需要销毁这些组件吗？如果是：如何？
这种方法有更好的解决方案吗？

Answer 1

有一个删除组件的destroy命令：

彻底摧毁一个vm。清除与其他现有虚拟机的连接，取消绑定其所有指令，关闭所有事件侦听器。触发beforeDestroy并销毁钩子。

https://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://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

Answer 2

您必须使用本地数据道具并在指令v-show和v-if

中使用

<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/

Vue.js删除组件的最佳做法

2 个答案: