Question

我正在使用vue，版本2.5.8

我想重新加载子组件，或者重新加载父组件，然后强制子组件重新加载。

我试图使用它。$ forceUpdate（）但这不起作用。

你知道怎么做吗？

Answer 1

向子组件添加密钥，然后在父组件中更新密钥。子组件将被重新创建。

<childComponent :key="childKey"/>

Answer 2

如果子项是由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>

Answer 3

我正在使用指令v-if，它负责条件渲染。它仅影响重新加载HTML <template>部分。计算的部分created（）不会重新加载。据我了解，在框架加载组件重新加载之后是不可能的。我们只能重新呈现<template>。

渲染器示例。

我有一个Child.vue组件代码：

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

在我的Parent.vue组件中，我可以调用子方法，并使用它的v-if强制子方法重新呈现

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

在控制台中单击一个按钮后，您将注意到消息“渲染期间调用函数”，通知您组件已重新渲染。

Answer 4

对组件使用：key并重置密钥。

请参见https://michaelnthiessen.com/force-re-render/

Answer 5

我发现，当您希望子组件刷新时，您要么需要将传递的属性输出到模板中的某个位置，要么需要通过计算的属性进行访问。

<!-- ParentComponent -->
<template>
    <child-component :user="userFromParent"></child-component>
</template>

<!-- ChildComponent -->
<template>
    <!-- 'updated' fires if property 'user' is used in the child template -->
    <p>user: {{ user.name }}
</template>
<script>
export default {
    props: {'user'},
    data() { return {}; }
    computed: {
        // Or use a computed property if only accessing it in the script
        getUser() {
            return this.user;
        }
    }
}
</script>

Answer 6

此示例来自@sureshvv共享的link

import Vue from 'vue';
Vue.forceUpdate();

// Using the component instance
export default {
methods: {
  methodThatForcesUpdate() {
    // ...
    this.$forceUpdate();  // Notice we have to use a $ here
    // ...
   }
  }
}

vue重新加载子组件

6 个答案: