vue3父组件通过refs怎么直接修改子组件值

在 Vue3 中，可以使用 `ref` 来获取子组件实例，并且可以通过这个实例直接修改子组件的值。

首先，在父组件中给子组件添加一个 `ref` 属性：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="changeChildValue">修改子组件的值</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    changeChildValue() {
      this.$refs.child.value = 'new value'
    }
  }
}
</script>

然后，在子组件中，需要在 `setup` 函数中暴露一个 `value` 变量，并且使用 `toRef` 将其转换为一个可响应的引用：

<template>
  <div>{{ value }}</div>
</template>

<script>
import { ref, toRef } from 'vue'

export default {
  setup() {
    const value = ref('initial value')
    return {
      value: toRef(value)
    }
  }
}
</script>

这样，父组件通过 `this.$refs.child.value` 就可以修改子组件的值了。