vue reload child component

Question

I'm using vue, version 2.5.8

I want to reload child component's, or reload parent and then force children components to reload.

I was trying to use this.$forceUpdate() but this is not working.

Do You have any idea how to do this?

Answer 1

Use a :key for the component and reset the key.

See https://michaelnthiessen.com/force-re-render/

Answer 2

Add key to child component, then update the key in parent. Child component will be re-created.

<childComponent :key="childKey"/>

Answer 3

If the children are dynamically created by a v-for or something, you could clear the array and re-assign it, and the children would all be re-created.

To simply have existing components respond to a signal, you want to pass an event bus as a prop, then emit an event to which they will respond. The normal direction of events is up, but it is sometimes appropriate to have them go down.

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>

Answer 4

I'm using directive v-if which is responsible for conditional rendering. It only affects reloading HTML <template> part. Sections created(), computed are not reloaded. As I understand after framework load components reloading it is not possible. We can only re render a <template>.

Rerender example.

I have a Child.vue component code:

<template>
    <div v-if="show">
      Child content to render 
      {{ callDuringReRender() }}
    </div>
</template>

<script>
    export default {
        data() {            
            return {               
                show: true
            }
        }
        ,
        methods: {
            showComponent() {
                this.show = true
            },
            hideComponent() {
                this.show = false
            },
            callDuringReRender() {
                console.log("function recall during rendering")
            }
        }
}
</script>

In my Parent.vue component I can call child methods and using it's v-if to force the child rerender

<template>
    <div>
      <input type="button" 
       value="ReRender the child" 
       @click="reRenderChildComponent"/>

      <child ref="childComponent"></child>

    </div>
</template>

<script>
    import Child from './Child.vue'

    export default {
       methods: {
            reRenderChildComponent(){
                this.$refs.childComponent.hideComponent();
                this.$refs.childComponent.showComponent()
            }
       },
       components: {
            Child
       }
    }
</script>

After clicking a button in console You will notice message "function recall during rendering" informing You that component was rerendered.