vue重新加载子组件

Question

我正在使用vue 2.5.8版

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

我正在尝试使用this。$ forceUpdate（），但无法正常工作。

您知道如何执行此操作吗？

Answer 1

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

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

Answer 2

为子组件添加键，然后更新父组件中的键。将重新创建子组件。

<childComponent :key="childKey"/>

Answer 3

如果孩子是由一个动态创建的 v-for或其他东西，您可以清除数组并重新分配它，并且孩子将全部重新创建。

要简单地让现有组件响应信号，您需要将事件总线作为 prop 传递，然后发出它们将响应的事件。事件的正常方向是向上，但有时让它们向下是合适的。

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>