Wie vuejs Komponente von außerhalb der Komponente

Question

ich eine Komponente wie dies in vuejs so etwas wie dieses

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

Und verwenden Sie diese Komponente in einer anderen Vorlage erstellt haben, zerstören.

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-Datei Code

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

So endlich wie kann ich meine "Baum-data" Komponente durch die "destroyComponent()" Methode

Answer 1

Als cobaltway zerstören die Sie verwenden können v-if

Einstellung v-if anfänglich auf false wird die Komponente rendern (generieren).

Dann in Ihrer Methode v-if zu wahren Willen Einstellung destroy the component.

html

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

Skript

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

Hier ist die fiddle