vue3中ref获取子组件的值

在Vue 3中，可以使用`ref`来获取子组件的值。首先，在父组件中使用`ref`创建一个引用对象，然后将该引用对象传递给子组件。在子组件中，可以使用`$props`属性来获取传递过来的引用对象，并通过该引用对象获取子组件的值。

以下是一个示例：

在父组件中：

<template>
  <div>
    <child-component :childValue="childValue"></child-component>
    <button @click="getChildValue">获取子组件的值</button>
  </div>
</template>

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

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

    const getChildValue = () => {
      console.log(childValue.value);
    };

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

在子组件中：

<template>
  <div>
    <input v-model="internalValue" type="text">
  </div>
</template>

<script>
import { toRefs } from 'vue';

export default {
  props: ['childValue'],
  setup(props) {
    const { childValue } = toRefs(props);

    const internalValue = childValue;

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

在父组件中，我们使用`ref`创建了一个名为`childValue`的引用对象，并将其传递给子组件。子组件接收到父组件传递的引用对象后，使用`toRefs`将其转换为响应式对象，并将其赋值给`internalValue`。然后，在父组件中，我们可以通过`childValue.value`来访问子组件的值。

希望对你有所帮助！如果有任何其他问题，请随时问我。