<template>
  <div class="parent">
    <!-- 点击按钮触发子组件重新加载 -->
    <button @click="reloadChildComponent" class="btn">重新加载子组件</button>
    <!-- 给子组件绑定 key，key 变化则子组件重新渲染 -->
    <ChildComponent :key="childKey" />
  </div>
</template>

<script>
// 引入子组件
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      // 用于控制子组件重新加载的 key 值
      childKey: 0
    }
  },
  methods: {
    // 点击按钮更新 key 值
    reloadChildComponent() {
      // 方式1：自增（简单且易追踪）
      this.childKey += 1
      // 方式2：随机数（适合不需要追踪 key 数值的场景）
      // this.childKey = Math.random()
    }
  }
}
</script>

<style scoped>
.btn {
  padding: 8px 16px;
  cursor: pointer;
  margin-bottom: 20px;
}
</style>

<template>
  <div class="child">
    <h4>我是子组件</h4>
    <p>当前子组件实例的 key：{{ $vnode.key }}</p>
    <p>加载时间：{{ loadTime }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      loadTime: ''
    }
  },
  // 生命周期钩子验证重新加载
  created() {
    console.log('子组件 created 钩子执行（新实例创建）')
    this.loadTime = new Date().toLocaleTimeString()
  },
  mounted() {
    console.log('子组件 mounted 钩子执行（DOM 挂载完成）')
  },
  destroyed() {
    console.log('子组件 destroyed 钩子执行（旧实例销毁）')
  }
}
</script>