vue3 父组件如何获取子组件的值

在Vue3中，父组件可以通过使用ref属性来标识子组件，然后使用$refs来获取子组件的值。具体的步骤如下：
1. 在父组件中定义一个方法，并在该方法内使用$refs来调用子组件的方法或获取子组件的属性值。例如，在父组件的template中添加一个子组件，并为其添加ref属性：

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

2. 在父组件的脚本中，使用$refs来访问子组件的方法或属性。例如，在父组件的脚本中定义getParentValue方法，通过$refs.myRefs来获取子组件的值或调用子组件的方法：

<script setup lang="ts">
 import {ref} from "vue"
  const myRefs = ref();

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

3. 在子组件中，使用defineExpose来暴露需要在父组件中获取的方法或属性。例如，在子组件的脚本中，使用defineExpose暴露change方法给父组件调用，并定义一个age属性：

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

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

  defineExpose({ change }) // 将change方法暴露给父组件
</script>

这样，父组件就可以通过$refs来获取子组件的值或调用子组件的方法了。在父组件的getParentValue方法中，可以使用myRefs.value来访问子组件的属性或方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [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_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [【Vue】三：Vue组件：props配置 父组件获取子组件](https://blog.csdn.net/weixin_45965358/article/details/131108762)[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_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]