vue3 父组件获取子组件的

在Vue 3中，父组件获取子组件的方法有两种常见的方式。第一种是使用ref，第二种是使用$refs。
使用ref的方法如下：

在父组件中，使用ref函数创建一个引用变量，并将其绑定到子组件上。例如：

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

// 父组件


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);
}

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中获取子组件的方式。具体操作如下：

在父组件中，给子组件添加一个ref属性。例如：// 父组件
<template>
<Son ref="myRefs"></Son>
<button @click="giveParentHandVal">向子组件传值</button>
</template>
登录后复制

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

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

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

引用[.reference_title]

1 3 关于vue3.2中父组件调用子组件的方法[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-2allinsert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
2 vue3.0 父组件调用子组件方法及获取子组件的值[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-2allinsert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]