vue技巧--强制刷新子组件

实际开发中一个组件的内容很可能会随着接口的内容而改变，这时候就需要刷新组件。子组件代码：

<template>
  <div class="childPage">
    <p>我是子组件child</p>
    <p>{{ time }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: new Date().getTime()
    };
  }
};
</script>

在子组件上绑定一个:key，并且不断的去改变key值 。这样的作用是利用了diff算法，从而刷新组件，具体可以学习一下diff算法。父组件代码：

<template>
  <div class="page">
    <Child :key="special"></Child>
    <button @click="updateSpecial()">刷新</button>
  </div>
</template>

<script>
import Child from "@/components/child.vue";

export default {
  data() {
    return {
      special: 1
    };
  },
  methods: {
      //这里我给按钮绑定了点击事件，每次点击则key++，从而使每次key不重复
      //也可使用new Date().getTime()等方法。
    updateSpecial() {
      this.special++;
    }
  },
  components: {
    Child
  }
};