vue3父组件打开子组件时刷新子组件

可以通过在父组件中使用 `key` 属性来实现刷新子组件。每当 `key` 值发生变化时，Vue 会销毁旧的子组件并创建新的子组件，从而达到刷新的效果。

具体实现方法如下：

1. 在父组件中定义一个变量，用于控制 `key` 值的变化。

2. 在子组件中使用 `key` 属性，并将其绑定到父组件中的变量上。

3. 当需要刷新子组件时，修改父组件中的变量，从而改变 `key` 值。

示例代码如下：

<!-- 父组件 -->
<template>
  <div>
    <button @click="refreshChild">刷新子组件</button>
    <child :key="childKey"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
 components: {
    Child
  },
  data() {
    return {
      childKey: 0 // 初始值为0
    }
  },
  methods: {
    refreshChild() {
      this.childKey++ // 修改值触发子组件刷新
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: '子组件内容'
    }
  }
}
</script>