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

Question

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

4

我创建了一个类似于这样的Vue.js组件：

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

Blade文件代码

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

最终，我如何通过“destroyComponent()”方法销毁我的“tree-data”组件？

- Tester

2

只需使用 v-if 进行切换。 - FitzFish

我想在生成后销毁此组件，而不是忽略生成。 - Tester

@Cobaltway 感谢您的评论。我在理解您的评论方面犯了错误。 - Tester

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vamsi Krishna · Accepted Answer

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

Here is the fiddle