VUEリロード子コンポーネント

Question

私はVUE、バージョン2.5.8

私は子供コンポーネントのをリロードする、または親をリロードしてからリロードする子コンポーネントを強制したいを使用しています。

これを使用しようとしましたが、$ forceUpdate（）が動作しません。

どうすればよいですか？

Answer 1

子供がv-forなどで動的に作成されている場合は、配列を消去して再度割り当てることができ、子供はすべて再作成されます。

既存のコンポーネントが信号に応答するようにするには、イベントバスをプロップとして渡してから、応答するイベントを送出する必要があります。イベントの正常な方向は上がっていますが、時にはそれらを下げることが適切です。

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>