vue3 父组件获取子组件的

在Vue 3中，父组件获取子组件的方法有两种常见的方式。第一种是使用`ref`，第二种是使用`$refs`。
使用`ref`的方法如下：
1. 在父组件中，使用`ref`函数创建一个引用变量，并将其绑定到子组件上。例如：

import { ref } from 'vue';
import Son from '@/views/home/components/Son.vue';

// 父组件
<template>
  <Son ref="myRefs"></Son>
  <button @click="giveParentHandVal">向子组件传值</button>
</template>

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

const myRefs = ref();

const giveParentHandVal = () => {
  // 通过引用变量调用子组件的方法
  myRefs.value.change();

  // 通过引用变量获取子组件暴露出来的值
  console.log(myRefs.value.age);
}
</script>

2. 在子组件中，定义需要暴露给父组件调用的方法，并使用`defineExpose`将其暴露出去。例如：

// 子组件
<script setup lang="ts">
import { defineExpose } from "vue";

const age = 20;

// 定义需要暴露给父组件调用的change方法
const change = () => {
  alert(222);
}

// 使用defineExpose暴露change方法
defineExpose({ change });
</script>

另一种方式是使用`$refs`，这种方式更类似于Vue 2中获取子组件的方式。具体操作如下：
1. 在父组件中，给子组件添加一个`ref`属性。例如：

// 父组件
<template>
  <Son ref="myRefs"></Son>
  <button @click="giveParentHandVal">向子组件传值</button>
</template>

2. 在父组件中，通过`this.$refs`来访问子组件的方法和属性。例如：

// 父组件中调用子组件的方法和获取子组件暴露的值
const giveParentHandVal = () => {
  // 通过$refs调用子组件的change方法
  this.$refs.myRefs.change();

  // 通过$refs获取子组件暴露出来的值
  console.log(this.$refs.myRefs.age);
}

#### 引用[.reference_title]
- *1* *3* [关于vue3.2中父组件调用子组件的方法](https://blog.csdn.net/Gorgio_Liu/article/details/125045647)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue3.0 父组件调用子组件方法及获取子组件的值](https://blog.csdn.net/weixin_44132285/article/details/126517620)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]