Vue3 基于setup语法糖（script setup）的父组件调用子组件中的方法

最新推荐文章于 2025-06-14 15:33:28 发布

ChuanYang Chen

最新推荐文章于 2025-06-14 15:33:28 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 Vue javascript 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_45525653/article/details/125590714

前端同时被 3 个专栏收录

73 篇文章

订阅专栏

javascript

39 篇文章

订阅专栏

Vue

29 篇文章

订阅专栏

本文介绍如何在Vue3中使用setup语法糖实现父组件调用子组件的方法，通过ref引用子组件实例并暴露子组件方法，实现数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3 基于setup语法糖（script setup）的父组件调用子组件中的方法🍬

前置知识：Vue中让子组件给父组件传递数据的3中方法

⭕️ 知识点：vue3；setup语法糖；组件ref；
⭕️ 以下例子实现了在父组件中，点击按钮，调用子组件中的changeNum（）方法
父组件：

<template>
  <Son1 ref="son1" />
  <button @click="changeNum">点击调用子组件中的方法</button>
</template>

<script setup>
import Son1 from "./components/Son1.vue";
import { ref } from "vue";
// 关键代码
let son1 = ref();
function changeNum(){
  son1.value.changeNum()
}
</script>

子组件：

<template>
  <div>Son1: {{num}}</div>
</template>
<script setup>
import {ref,defineExpose} from 'vue'
let num = ref(10);
// eslint-disable-next-line no-unused-vars
function changeNum(){
  num.value = 100
}
// 记得暴露
defineExpose({
  changeNum
});
</script>