如何从组件外部销毁vue.js组件

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将破坏该组件。

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;
    }
}
}); 

这是小提琴