使用场景

在Vue项目中，通常我们都会封装一些组件，以供在项目中复用，方便维护。通常我们我们会在父组件中引用子组件，可以通过props给子组件传递不同的值，从而渲染不同数据的子组件。
但是有的时候，我们传递给组件的值虽然会发生变化，watch也可以监听到不同的值，但是子组件的中展示的数据并没有发生变化，created()生命周期函数也只会执行一次，这是因为子组件在第一次触发事件的时候就已经渲染好了，之后尽管父组件中再次触发事件，传递不同的数据，子组件也不会在重新渲染。
但是我们需要，父组件中每次触发事件的时候，子组件都可以重新渲染，这时候就可以用到vue中的key属性了，通过给子组件绑定一个key，来让vue的diff算法可以比较两次key值是否不同，如果不同，vue就会重新加载子组件，否则就保持原有状态，这样就可以达到目的了，时间戳，随机数都行

代码

<template>
<!-- 父组件 -->
  <el-dialog
    title="修改"
    :visible="isShow"
    @open='show'
    append-to-body>
    <el-form :model="editForm" :rules="editRules" ref="editCustomerRef">
      <el-form-item
        class="editAreas"
        label="所属省市区："
        prop="province"
        :label-width="formLabelWidth"
      >
       <!-- 子组件 -->
        <areas :key="timer" ref="areasRef" @selectArea="selectArea" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save">确认</el-button>
      <el-button @click="isShow = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
  	return {}
  },
  components: {
    Areas
  },
  methods: {
    // 省市区选中
    selectArea() {},
    show() {
      this.timer = new Date().getTime()
    }
  }
}
</script>