vue 重载子组件答案

【问题标题】：vue reload child componentvue 重载子组件
【发布时间】：2018-05-20 21:23:41
【问题描述】：

我正在使用 vue，版本 2.5.8

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

我试图使用 this.$forceUpdate() 但这不起作用。

你知道怎么做吗？

【问题讨论】：

你能描述一下你所说的重新加载是什么意思吗？通常，您的数据控制着程序的状态，您可能应该在某处查看更改数据。
你好@RoyJ 是的，我有很多子组件，我想重置他们的数据
所以每个孩子都有从一个prop初始化的数据，然后改变了值，你想把它重置回prop值吗？类似的东西？
我不想为此使用道具，我只想让组件数据部分处于初始状态

标签： vue.js vuejs2

【解决方案1】：

这个例子来自@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
    // ...
   }
  }
}

【讨论】：

【解决方案2】：

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

<childComponent :key="childKey"/>

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

哎呀我的坏:(
实际上，作者说在组件上绑定 v-key 是“最好的”方法。 “不使用”是关于 v-if 和 v-key。

【解决方案5】：

我正在使用负责条件渲染的指令 v-if。它只影响重新加载 HTML <template> 部分。部分 created(), computed 不会重新加载。据我了解，在重新加载框架加载组件后，这是不可能的。我们只能重新渲染一个<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>

单击控制台中的按钮后，您会注意到“渲染期间功能调用”消息，通知您该组件已重新渲染。

【讨论】：

我从中得到的是如何触发子组件方法。这可能是一种反模式，但它是我更新我项目中的组件的唯一方法——它的反应性不够。

【解决方案6】：

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

【讨论】：