vue: 每次进入子组件都重新加载子组件,重新生成DOM元素

需求:

• 情况1: 父组件每次打开子组件,都需要一个全新的子组件
• 情况2: 使用el-dialog弹窗模式加载子组件, 子组件具有保存/关闭按钮, ①子组件点击保存,下次进入子组件需重新加载组件,全部已填内容清空. ②子组件点击关闭,未点击保存,下次进入内容不清空

解决方案

• 子组件使用watch监听值的变化从而改变内容(如果要清空内容,很麻烦)
• 使用key属性方法 ①:如果每次进入都需要重新刷新子组件,则在父组件设定时间戳,每次点击更新时间戳替代key. ②子组件点击关闭,未点击保存,下次进入内容不清空,则在子组件设定时间戳,子组件点击保存后再传回时间戳

代码

①每次打开子组件都重新加载子组件DOM

<template>
  <el-button type="text" @click="openSun">打开子组件</el-button>
  <el-dialog :visible.sync="sunShow" >
    <Sun  :key="timer" />
  </el-dialog>
</template>

<script>
import Sun from '@/components/addWay';
export default {
  components: {Sun},
  data () {
    return {
      sunShow:false,
      timer:''
    }
  },
  methods: {
    openSun(){
      this.sunShow = true
      this.timer = new Date().getTime()
    },
  }
};
</script>

②就不写了,就是子组件把this.timer = new Date().getTime() 传回给父组件,父组件接起来给子组件做key值