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

Posted 2023-02-23

【中文标题】如何从组件外部销毁 vuejs 组件

【英文标题】：How to destroy vuejs component from outside of component

【发布时间】：2017-11-30 02:51:28

【问题描述】：

我在 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”组件

【问题讨论】：

用 v-if 来调整它。

我想在生成后销毁这个组件而不是忽略生成

@Cobaltway 感谢您的评论。我错了理解你的评论

【参考方案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

【讨论】：

感谢您的回答，但我想销毁这个没有条件隐藏的组件。我想要这样的东西... var components = this.$options.components['tree-data'];组件.$destroy();

@Tester v-if 将销毁组件。 destroyed() 生命周期钩子将被调用。我将添加一个小提琴等待

@Tester 加个链接看看小提琴看看