如何从组件外部销毁 vuejs 组件

Question

我在 vuejs 中创建了一个类似这样的组件

    var tree_data = Vue.extend({
        template: '#tree_data_template',
        props: [
            'groupmodal',
            'search-name',
            'tree-id'
        ], // props in single quotes
        data: function () {
            return {
                shared: d2d.store
            };
        }
    });

并在像这样的另一个模板中使用这个组件。

var template_data = Vue.extend({
template: '#template_data',
created: function () {
    var self = this;
    self.shared.setCurrentRoute('templates');
},
components: {
    'tree-data': tree_data
},
data: function () {
    return {
        id: this.$route.params.id,
        shared: d2d.store,
    };
},
methods: {
    destroyComponent: function () {
        //Need to code for destroy tree-data component
    }
}
});

刀片文件代码

<tree-data 
     groupmodal="false"                 
     search-name="user_search" 
     tree-id="user_tree" 
>
</tree-data>

那么最后我该如何通过“destroyComponent()”方法销毁我的“tree-data”组件

Answer 1

正如 cobaltway 所说，您可以使用v-if

将v-if 初始设置为 false 将渲染（生成）组件。

然后在您的方法中将v-if 设置为true 将destroy the component.

html

<div id="template_data">
     <tree-data v-if="destroyComponent"></tree-data>
</div>

脚本

var template_data = Vue.extend({
template: '#template_data',
created: function () {
    var self = this;
    self.shared.setCurrentRoute('templates');
},
components: {
    'tree-data': tree_data
},
data: function () {
    return {
        id: this.$route.params.id,
        shared: d2d.store,
        destroyComponent:true
    };
},
methods: {
    destroyComponent: function () {
        //Need to code for destroy tree-data component
        this.destroyComponent = false;
    }
}
}); 

这里是fiddle