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>

所以最后我怎么能破坏我的＆＃34;树数据＆＃34;组件通过＆＃34; destroyComponent（）＆＃34;方法

Answer 1

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

最初将v-if设置为false将呈现（生成）组件。

然后在您的方法设置v-if为真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

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

1 个答案: