Vue 2，父组件中点击一个按钮，更新子组件（重新加载子组件）

Vue 2，父组件中点击一个按钮，更新子组件（重新加载子组件）【可行】

 

想要在 Vue 2 中通过点击父组件的按钮，实现子组件的重新加载（重新渲染、执行完整生命周期），这个需求可以通过 Vue 核心的 key 属性来优雅实现，这也是 Vue 官方推荐的最佳方式。

 

实现思路

 

Vue 的虚拟 DOM 对比算法会根据 key 属性识别组件实例，当绑定在子组件上的 key 值发生变化时，Vue 会销毁旧的子组件实例、创建新的实例，从而触发子组件的完整生命周期（created/mounted 等），达到 “重新加载” 的效果。

 

完整代码示例

 

1. 父组件（Parent.vue）

 

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

 

 

2. 子组件（ChildComponent.vue）

 

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

 

 

关键代码解释

 

1. key 属性绑定：父组件给子组件绑定 :key="childKey"，这是触发子组件重新加载的核心。
2. 更新 key 值：点击按钮时执行 reloadChildComponent 方法，通过 this.childKey += 1 改变 key 值（也可以用随机数、时间戳等）。
3. 生命周期验证：子组件中添加了 created/mounted/destroyed 钩子，点击按钮后可以在控制台看到旧实例销毁、新实例创建的日志，同时页面上的 “加载时间” 会更新，证明子组件已重新加载。

 

补充说明

 

• 对比 v-if 方案：虽然 v-if="false" 再设为 true 也能实现重新加载【不行】，但 key 方案更简洁（无需控制显示隐藏）、更符合 Vue 设计理念，尤其适合仅需 “重新加载” 而非 “显隐切换” 的场景。
• 传参场景适配：如果父组件给子组件传递 props，重新加载后的子组件会自动接收最新的 props 值，无需额外处理。

 

总结

 

1. 核心方案：给子组件绑定 key 属性，通过更新 key 值触发子组件重新渲染。
2. 实现逻辑：key 值变化时，Vue 销毁旧子组件实例并创建新实例，子组件完整生命周期重新执行。
3. 优势：简洁、符合 Vue 最佳实践，适配绝大多数 “重新加载子组件” 的业务场景。