父组件调用子组件方法(组合式 API版)
在 Vue 3 中,defineExpose 是一个用于在组合式 API (Composition API) 中暴露组件内部方法或属性的函数。它允许父组件通过 ref 引用子组件实例,并调用子组件暴露的方法或访问其属性。
以下是子组件和父组件如何使用 defineExpose 和 ref 的详细解释和示例。
子组件
子组件通过 defineExpose 来暴露方法,使父组件能够调用这些方法。
<!-- 子组件 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 引用子组件实例,并可以调用子组件暴露的方法。
<!-- 父组件 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>
原理解释
-
子组件中的
defineExpose:defineExpose用于将子组件的某些方法或属性暴露给父组件。在这个例子中,openModal和handleCancel方法通过defineExpose暴露。- 这样做的目的是让父组件能够调用这些方法来控制子组件的行为,比如打开或关闭模态框。
-
父组件中的
ref:- 在父组件中,通过
ref引用子组件的实例。使用ref可以在父组件中直接访问子组件的方法和属性。 - 例如,
const selectCaseRef = ref(null);创建一个引用来存储子组件实例。 - 在模板中,通过
ref="selectCaseRef"将子组件实例赋值给selectCaseRef。
- 在父组件中,通过
-
调用子组件的方法:
- 一旦子组件实例被引用到
selectCaseRef,父组件就可以通过selectCaseRef.value访问子组件的暴露方法。 selectCaseRef.value.openModal();调用子组件的openModal方法,从而在子组件中打开模态框。
- 一旦子组件实例被引用到
相关文章:
父组件调用子组件方法(组合式 API版)
在 Vue 3 中,defineExpose 是一个用于在组合式 API (Composition API) 中暴露组件内部方法或属性的函数。它允许父组件通过 ref 引用子组件实例,并调用子组件暴露的方法或访问其属性。 以下是子组件和父组件如何使用 defineExpose 和 ref 的详细解释和示…...
【动手学深度学习】使用块的网络(VGG)的研究详情
目录 🌊1. 研究目的 🌊2. 研究准备 🌊3. 研究内容 🌍3.1 多层感知机模型选择、欠拟合和过拟合 🌍3.2 练习 🌊4. 研究体会 🌊1. 研究目的 理解块的网络结构;比较块的网络与传统…...
JFinal学习07 控制器——接收数据之getBean()和getModel()
JFinal学习07 控制器——接收数据之getBean()和getModel() 视频来源https://www.bilibili.com/video/BV1Bt411H7J9/?spm_id_from333.337.search-card.all.click 文章目录 JFinal学习07 控制器——接收数据之getBean()和getModel()一、接收数据的类型二、getBean()和getModel()…...
二百三十九、Hive——Hive函数全篇
--创建测试数据库test show databases ; create database if not exists test; use test;一、关系运算 1、等值比较: select 1 where 1 1; --1 select 1 where 0 1; --NULL 2、不等值比较:<> select 1 where 1 <> 2; --1 sele…...
视频去水印电脑版,视频去水印软件
视频去水印怎么去,一直是视频编辑者们的热门话题。那么,如何去除频水印呢?接下来,我们将为您详细介绍视频去水印方法。 第一种方法: 首先通过浏览器打开 “ 51视频处理官网” 的网站。打开网站后,我们上传…...
北邮21硕后端开发笔记
blog 整理北邮21渣硕Java后端开发知识网络,阅读笔记以及技术博客,持续更新!欢迎Star! GitHub: https://github.com/WeiXiao-Hyy/blog Java 基础篇 一文带你搞懂final关键字 Java并发编程 fucking-java-concurrency解读你真…...
【Linux】系统优化:一键切换软件源与安装Docker
引言 在Linux系统安装完成后,进行一些必要的初始化设置是提升系统性能和用户体验的关键。本文将重点介绍两个实用的一键脚本:LinuxMirrors提供的软件源切换脚本和Docker安装脚本。这两个脚本将帮助我们简化配置安装过程。 一键切换软件源脚本 在Linux…...
【集装箱调度】基于粒子群算法实现考虑重量限制和时间约束的集装箱码头满载AGV自动化调度附matlab代码
% 交叉定位 - 最小二乘法定位算法模拟 % 参数设置 numIterations 1000; % 模拟迭代次数 maxDistance 1000; % 最远定位距离(设定范围) speedOfSound 343; % 声速(单位:m/s) % 预警机坐标 source [0, 0]; % 初始…...
使用 ESP32 和 PlatformIO (arduino框架)实现 Over-the-Air(OTA)固件更新
使用 ESP32 和 PlatformIO 实现 Over-the-Air(OTA)固件更新 摘要: 本文将介绍如何在 ESP32 上使用 PlatformIO 环境实现 OTA(Over-the-Air)固件更新。OTA 更新使得在设备部署在远程位置时,无需物理接触设…...
学习笔记——路由网络基础——汇总静态路由
4、汇总静态路由 (1)定义 静态路由汇总:多条静态路由都使用相同的送出接口或下一跳 IP 地址。(将多条路由汇总成一条路由表示) (2)目的 1.减少路由条目数量,减小路由表,加快查表速度 2.增加网络稳定性 (3)路由黑洞以及路由环路的产生…...
这10个python库,下载都超过5亿
python的库数不胜数。哪些库使用得最多呢。今天分享10个下载都超过5亿的python库。从高到低排序 第一名:Urllib3 下载次数:8.93亿次 介绍:Urllib3是一个功能强大且用户友好的HTTP客户端库,提供了许多Python标准库中没有的特性&…...
Vue3【十一】08使用toRefs和toRef
08使用toRefs和toRef toRefs()函数将person对象中的name和age属性转换为响应式引用,并返回一个对象,对象中的name和age属性都是响应式引用,具有响应式功能。 toRef()函数将person对象中的name属性转换为响应式引用,并返回一个响应…...
离散数学---树
目录 1.基本概念及其相关运用 2.生成树 3.有向树 4.最优树 5.前缀码 1.基本概念及其相关运用 (1)无向树:连通而且没有回路的无向图就是无向树; 森林就是有多个连通分支,每个连通分支都是树的无连通的无向图&…...
【栈】1106. 解析布尔表达式
本文涉及知识点 栈 LeetCode 1106. 解析布尔表达式 布尔表达式 是计算结果不是 true 就是 false 的表达式。有效的表达式需遵循以下约定: ‘t’,运算结果为 true ‘f’,运算结果为 false ‘!(subExpr)’,运算过程为对内部表达式…...
u盘内容无故消失了是什么原因?u盘部分内容无故消失了怎么恢复
在数字化时代,U盘作为便携存储设备,承载着许多重要的数据。然而,有时我们可能会遭遇U盘部分内容无故消失的情况,这无疑给我们的工作和生活带来了不小的困扰。本文将为您解析U盘内容消失的可能原因,并分享几招实用的数据…...
glm-4v-9b 部署
glm-4v-9b 模型文件地址 GLM-4 仓库文件地址 官方测试 硬件配置和系统要求 官方测试硬件信息: OS: Ubuntu 22.04Memory: 512G…...
Ansible——unarchive模块
目录 参数总结 基础语法 常见的命令行示例 示例1:解压缩文件到指定目录 示例2:解压缩文件并设置权限 示例3:远程URL解压缩 示例4:强制覆盖现有文件 具体步骤和示例 示例5:只要文件解压后,如果存在…...
Ansible——get_url模块
目录 主要用途 参数总结 基本语法示例 使用示例 示例1:下载文件 示例2:使用校验和验证文件 示例3:使用 HTTP 基本认证 示例4:通过代理服务器下载文件 示例5:设置文件权限、所有者和组 示例6:强制…...
macbook本地部署 pyhive环境连接 hive用例
前言 公司的测试和生产环境中尚未提供基于Hive的客户端。若希望尝试操作Hive表,目前一个可行的方案是使用Python语言,通过借助pyhive库,您可以对Hive表进行各种操作。以下是一些示例记录供您参考。 一、pyhive是什么? PyHive是一…...
物理安全防护如何创新强化信息安全体系?
物理安全防护是信息安全体系的重要组成部分,它通过保护实体设施、设备和介质等,防止未授权访问、破坏、盗窃等行为,从而为信息系统提供基础的安全保障。要创新强化信息安全体系中的物理安全防护,可以从以下几个方面着手࿱…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象:mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时,可能是因为以下几个原因:1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
Leetcode33( 搜索旋转排序数组)
题目表述 整数数组 nums 按升序排列,数组中的值 互不相同 。 在传递给函数之前,nums 在预先未知的某个下标 k(0 < k < nums.length)上进行了 旋转,使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...
鸿蒙(HarmonyOS5)实现跳一跳小游戏
下面我将介绍如何使用鸿蒙的ArkUI框架,实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...
论文阅读:Matting by Generation
今天介绍一篇关于 matting 抠图的文章,抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法,已经有很多的工作和这个任务相关。这两年 diffusion 模型很火,大家又开始用 diffusion 模型做各种 CV 任务了&am…...
