vue 3父组件操作子组件的两个ref

在Vue 3中，`ref` 是用于包装值并提供响应式API的对象。如果你想在父组件操作子组件的`ref`，通常有两种常见的做法：

1. **通过props传递**:
父组件可以创建一个`ref`并在其`data`或`setup`中初始化，然后将这个`ref`作为prop传给子组件。在子组件内部对`ref`的内容进行修改，父组件会自动感知到变化。

// 父组件
const childValueRef = ref();

<template>
  <ChildComponent :value="childValueRef" />
</template>

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

export default {
  components: { ChildComponent },
};
</script>

2. **在子组件内暴露方法**:
子组件可以在`methods`或自定义hook里定义一个方法，这个方法处理具体的值并返回给父组件。父组件可以通过调用这个方法间接控制子组件的状态。

// 子组件
export default {
  setup() {
    const value = ref('');

    // 需要在子组件上添加一个方法供外部访问
    const setValue = (newValue) => {
      value.value = newValue;
    };

    return {
      setValue,
      value,
    };
  },
}

// 父组件
<template>
  <button @click="updateChildValue">更新子组件</button>
  <ChildComponent :value="childValue" @setNewValue="updateChildValue" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';
import { onMounted } from 'vue';

export default {
  components: { ChildComponent },
  setup() {
    const childValue = ref('');

    onMounted(() => {
      // 初始化时设置初始值
      childValue.value = '初始值';
    });

    function updateChildValue(newValue) {
      childValue.value = newValue;
    }

    return {};
  },
};
</script>