Vue中点击父组件按钮时如何重置子组件Set的data为初始值

方案1：通过key强制组件重新渲染（最简实现） #

原理是给动态组件绑定唯一key，每次切换到Set标签时更新key，Vue会销毁旧的Set组件实例、重新初始化新实例，data自动恢复为初始默认值，不需要修改子组件Set的任何代码即可实现需求。
父组件修改代码如下：

<!-- 模板部分 -->
<v-btn @click="setSelectedTab('Set')"> ... 
<component :is="selectedTab" :key="setTabKey"></component>

<!-- script部分 -->
<script>
export default {
  data() {
    return {
      selectedTab: '',
      setTabKey: 0 // 新增key控制字段
    }
  },
  methods: {
    setSelectedTab(tabName) {
      this.selectedTab = tabName
      // 切换到Set标签时更新key，触发组件重制
      if (tabName === 'Set') {
        this.setTabKey += 1
      }
    }
  }
}
</script>

方案2：子组件暴露重置方法，父组件主动调用 #

如果不想触发组件整体销毁重建，可以在子组件封装重置方法，父组件切换标签时主动调用。

子组件Set新增代码： #

<script>
export default {
  data() {
    return {
      showHeadSet: true,
      showRobotix: false,
      showScreenSettings: false,
    };
  },
  methods: {
    // 新增状态重置方法
    resetStatus() {
      this.showHeadSet = true
      this.showRobotix = false
      this.showScreenSettings = false
    }
  }
}
</script>

父组件修改代码： #

<!-- 模板部分给动态组件添加ref标记 -->
<component :is="selectedTab" ref="activeTab"></component>

<!-- script部分修改setSelectedTab方法 -->
<script>
export default {
  methods: {
    async setSelectedTab(tabName) {
      this.selectedTab = tabName
      if (tabName === 'Set') {
        // 等待组件渲染完成后调用重置方法
        await this.$nextTick()
        this.$refs.activeTab?.resetStatus()
      }
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者veritas