父组件调用子组件并获取值

在Vue 3.0中，父组件调用子组件并获取值的方式与Vue 2.0有些类似。你可以使用`ref`来获取子组件的引用，并通过该引用调用子组件的方法或获取子组件的值。

在父组件中，你需要定义一个方法，并在该方法中通过`ref`去调用子组件的方法或获取子组件的值。例如：

<template>
  <son ref="myRefs"></son>
  <button @click="getParentValue">获取子组件的值</button>
</template>

<script setup lang="ts">
import son from '@/views/home/components/son.vue'
import { ref } from "vue"

const myRefs = ref();

const getParentValue = () => {
  myRefs.value.change(); // 通过ref调用子组件的方法
  console.log(myRefs.value.age); // 通过ref获取子组件的值
}
</script>

在子组件中，你需要定义一个方法并通过`defineExpose`暴露出来，以便父组件可以调用。例如：

<script setup lang="ts">
import { defineExpose } from "vue"

const age = 20;

const change = () => {
  alert(222);
}

defineExpose({ change });
</script>

通过以上方式，你可以在父组件中调用子组件的方法并获取子组件的值。