父组件调用子组件方法(组合式 API版)

在 Vue 3 中,defineExpose 是一个用于在组合式 API (Composition API) 中暴露组件内部方法或属性的函数。它允许父组件通过 ref 引用子组件实例,并调用子组件暴露的方法或访问其属性。

以下是子组件和父组件如何使用 defineExposeref 的详细解释和示例。

子组件

子组件通过 defineExpose 来暴露方法,使父组件能够调用这些方法。

javascript 复制代码
<!-- 子组件 SelectCase.vue -->
<template>
  <a-modal v-model:visible="caseIsVisable">
    <!-- 模态框内容 -->
  </a-modal>
</template>

<script setup>
import { ref } from 'vue';

const caseIsVisable = ref(false);

// 新增,打开模态框
const openModal = () => {
  caseIsVisable.value = true;
};

// 取消,关闭模态框
const handleCancel = () => {
  caseIsVisable.value = false;
};

// 暴露方法给父组件
defineExpose({
  openModal,
  handleCancel,
});
</script>

父组件

父组件通过 ref 引用子组件实例,并可以调用子组件暴露的方法。

javascript 复制代码
<!-- 父组件 ParentComponent.vue -->
<template>
  <SelectCase ref="selectCaseRef" :graphInfo="graphInfo" />
  <button @click="openChildModal">Open Modal in Child</button>
</template>

<script setup>
import { ref } from 'vue';
import SelectCase from './SelectCase.vue';

const graphInfo = ref({}); // 示例数据

// 引用子组件实例
const selectCaseRef = ref(null);

// 调用子组件方法
const openChildModal = () => {
  selectCaseRef.value.openModal();
};
</script>

原理解释

  1. 子组件中的 defineExpose:

    • defineExpose 用于将子组件的某些方法或属性暴露给父组件。在这个例子中,openModalhandleCancel 方法通过 defineExpose 暴露。
    • 这样做的目的是让父组件能够调用这些方法来控制子组件的行为,比如打开或关闭模态框。
  2. 父组件中的 ref:

    • 在父组件中,通过 ref 引用子组件的实例。使用 ref 可以在父组件中直接访问子组件的方法和属性。
    • 例如,const selectCaseRef = ref(null); 创建一个引用来存储子组件实例。
    • 在模板中,通过 ref="selectCaseRef" 将子组件实例赋值给 selectCaseRef
  3. 调用子组件的方法:

    • 一旦子组件实例被引用到 selectCaseRef,父组件就可以通过 selectCaseRef.value 访问子组件的暴露方法。
    • selectCaseRef.value.openModal(); 调用子组件的 openModal 方法,从而在子组件中打开模态框。
相关推荐
gzzeason6 分钟前
Ajax:现代JS发起http通信的代名词
前端·javascript·ajax
iphone10813 分钟前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
paopaokaka_luck19 分钟前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
老坛00130 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00131 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾34 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐39 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价39 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花40 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101340 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端