2017-12-06 4 views
0

Ich verwende vue, Version 2.5.8vue Reload-Kind-Komponente

Ich möchte Kind Komponente neu zu laden, oder ein Elternteil neu laden und dann Kinder Komponenten zu zwingen neu zu laden.

Ich habe versucht, dies zu verwenden. $ ForceUpdate() aber das funktioniert nicht.

Haben Sie eine Idee, wie Sie das machen?

+1

Können Sie beschreiben, was Sie mit dem Reload bedeuten? Im Allgemeinen steuern Ihre Daten den Status Ihres Programms, und Sie sollten wahrscheinlich irgendwo Daten ändern. –

+0

Hallo @RoyJ ja ich habe viele Kind-Komponenten und ich möchte ihre Daten zurücksetzen – zaqpiotr

+0

Also jedes Kind hat Daten, die von einer Requisite initialisiert wird, und dann wird der Wert geändert, und Sie möchten es zurück auf den Prop-Wert zurücksetzen? So ähnlich? –

Antwort

2

Wenn die untergeordneten Elemente dynamisch mit v-for oder ähnlichem erstellt werden, können Sie das Array löschen und neu zuweisen, und die untergeordneten Elemente werden alle neu erstellt.

Um einfach vorhandene Komponenten auf ein Signal reagieren zu lassen, möchten Sie einen Ereignisbus als Propeller übergeben und dann ein Ereignis ausgeben, auf das sie antworten. Die normale Richtung der Ereignisse ist aufwärts, aber manchmal ist es angebracht, sie herunterzufahren.

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    bus: new Vue() 
 
    }, 
 
    components: { 
 
    child: { 
 
     template: '#child-template', 
 
     props: ['bus'], 
 
     data() { 
 
     return { 
 
      value: 0 
 
     }; 
 
     }, 
 
     methods: { 
 
     increment() { 
 
      this.value += 1; 
 
     }, 
 
     reset() { 
 
      this.value = 0; 
 
     } 
 
     }, 
 
     created() { 
 
     this.bus.$on('reset', this.reset); 
 
     } 
 
    } 
 
    } 
 
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <child :bus="bus"> 
 
    </child> 
 
    <child :bus="bus"> 
 
    </child> 
 
    <child :bus="bus"> 
 
    </child> 
 
    <button @click="() => bus.$emit('reset')">Reset</button> 
 
</div> 
 

 
<template id="child-template"> 
 
    <div> 
 
    {{value}} <button @click="increment">More!</button> 
 
    </div> 
 
</template>

Verwandte Themen