uniapp父页面调用子页面 组件方法记录

在这里插入图片描述

文章目录

  • 导文
  • 如何点击父页面,触发子页面函数
    • 先写一个子页面的基础内容
    • 父元素
  • 如何点击父页面,修改子页面的值
    • 先写一个子页面的基础内容
    • 父元素


导文

如何点击父页面,触发子页面函数?
如何点击父页面,修改子页面的值?

如何点击父页面,触发子页面函数

使用的方法是 this.$refs

先写一个子页面的基础内容

在这里插入图片描述
主要是要有要被触发的函数,或者数值。

<template><view class="checkInSharing"><uni-popup ref="share" type="share" safeArea backgroundColor="#fff"><uni-popup-share></uni-popup-share></uni-popup></view>
</template><script>export default {components: {},data() {return {}},props: {dateList: {type: Object, // 指定dateList应该是一个数组类型default: () => { } // 设置默认值,以防父组件没有传递}},// mounted() {//     this.checkinDetails()// },methods: {checkinDetails() {console.log(`${this.dateList.year}-${this.dateList.month}-${this.dateList.date}`);console.log(this.dateList);},show() {console.log(1);this.$refs.share.open()}}
}
</script><style lang="scss">
.checkInSharing {}
</style>

父元素

要先把组件引入,给子元素添加ref=

<checkInSharing :dateList="dateList" ref="checkInSharingPage"></checkInSharing>import { getCheckinDetails, postCheckinCreate } from '@/api/checkIn.js'
import checkInSharing from '../checkInSharing/index.vue'
export default {components: {checkInSharing},

然后在函数中使用

handerCheckin() {this.$refs.checkInSharingPage.show()},

this.$refs.[子页面函数ref名].[子页面函数方法名]

如何点击父页面,修改子页面的值

使用的方法是 this.$refs

先写一个子页面的基础内容

在这里插入图片描述
主要是要有要被触发的函数,或者数值。

<template><view class="checkInSharing"><uni-popup ref="share" type="share" safeArea backgroundColor="#fff"><uni-popup-share></uni-popup-share></uni-popup></view>
</template><script>export default {components: {},data() {return {value:0}},props: {dateList: {type: Object, // 指定dateList应该是一个数组类型default: () => { } // 设置默认值,以防父组件没有传递}},// mounted() {//     this.checkinDetails()// },methods: {checkinDetails() {console.log(`${this.dateList.year}-${this.dateList.month}-${this.dateList.date}`);console.log(this.dateList);},show() {console.log(1);this.$refs.share.open()}}
}
</script><style lang="scss">
.checkInSharing {}
</style>

父元素

要先把组件引入,给子元素添加ref=

<checkInSharing :dateList="dateList" ref="checkInSharingPage"></checkInSharing>import { getCheckinDetails, postCheckinCreate } from '@/api/checkIn.js'
import checkInSharing from '../checkInSharing/index.vue'
export default {components: {checkInSharing},

然后在函数中使用

handerCheckin() {this.$refs.checkInSharingPage.value=1},

this.$refs.[子页面函数ref名].[子页面数值名]=[要修改的数值]

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/43233.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

英区PayPal账号3分钟绑定WISE英镑的银行收款账户

正文开始&#xff0c;我们先登录英区PayPal账号后 有很多银行给我们选择&#xff0c;但是没有WISE的选项&#xff0c;所以我们手动输入“WISE”&#xff0c;然后如下图所示点击“Enter Your Bank Detailds”输入银行详细信息按钮。 然后输入我们的WISE英镑账户的收款银行信息&a…

Advanced Electronic Materials:磁性智能皮肤作为人机界面

近年来&#xff0c;电子可穿戴设备的普及率迅速上升&#xff0c;柔性可穿戴设备因其高生物相容性、功能性、适应性和低成本而在人机界面上引起了极大的关注。柔性磁性智能皮肤是这一快速发展的柔性可穿戴电子领域的一部分&#xff0c;为人类感知发展开辟了一条新的道路。磁感是…

SpringCloud第一篇Docker基础

文章目录 一、常见命令二、数据卷三、数据挂载四、自定义镜像五、网络 一、常见命令 Docker最常见的命令就是操作镜像、容器的命令&#xff0c;详见官方文档&#xff1a; https://docs.docker.com/ 需求&#xff1a; 在DockerHub中搜索Nginx镜像&#xff0c;查看镜像的名称 …

k8s集群如kubeadm init和kube-flannel.yam问题

查看k8s中角色内容kubectl get all (显示pod和server以及delment) 删除应用资源选择删除先删除部署查看部署和pod没了服务还在&#xff0c;但资源和功能以及删除&#xff0c;删除服务kubectl delete 服务名&#xff08;部署名&#xff09;&#xff0c;get pods 获取默认空间的容…

从资金到未来:技术融资如何重塑IT顾问在AI与网络安全的角色?

一方面是人工智能 &#xff08;AI&#xff09; 和机器学习 &#xff08;ML&#xff09; 的双引擎&#xff0c;另一方面是网络安全和数据泄露威胁中不断变化的威胁形势&#xff0c;IT 格局正在经历翻天覆地的变化。这场数字革命对 IT 顾问来说既是挑战也是机遇&#xff0c;但要成…

解决计算机中mfc140u.dll没有被指定在windows上运行

在打开电脑软件时候出现mfc140u.dll丢失或找不到mfc140u.dll怎么办&#xff1f;遇到这个问题相当困扰&#xff0c;mfc140u.dll到底是什么&#xff1f;为什么会出现这个情况&#xff0c;相信很多人都不知道&#xff0c;今天我给大家详细介绍一下mfc140u.dll是什么&#xff0c;为…

【C++修行之道】string类的使用

目录 一.C语言中的字符串 二、标准库中的string类 (了解) 2.1 string类(了解) 2.2 帮助文档阅读 三、 string类的常用接口说明 3.1 string类对象的常见构造 3.2 string类对象的容量操作 3.3 string类对象的访问及遍历操作 字符串类的简单实现 3.4 string类对象的修改…

【论文阅读笔记】ASPS: Augmented Segment Anything Model for Polyp Segmentation

1.论文介绍 ASPS: Augmented Segment Anything Model for Polyp Segmentation ASPS&#xff1a;用于息肉分割的扩展SAM模型 2024年 arxiv Paper Code 2.摘要 息肉分割在结直肠癌诊断中起着至关重要的作用。最近&#xff0c;Segment Anything Model(SAM)的出现利用其在大规模…

视频压缩软件哪个压缩最小,视频用什么软件压缩最小

在数字媒体时代&#xff0c;视频内容的生产与分享已成为生活常态。但随之而来的问题就是&#xff0c;大视频文件占用过多存储空间&#xff0c;上传和分享也变得不便。本文将为你揭示如何将视频压缩到最小&#xff0c;同时保持画质清晰。让我们一起探索吧&#xff01; 下载并文件…

剪辑抽帧技巧有哪些 剪辑抽帧怎么做视频 剪辑抽帧补帧怎么操作 剪辑抽帧有什么用 视频剪辑哪个软件好用在哪里学

打破视频节奏&#xff0c;让作品告别平庸。抽帧剪辑可以改变视频叙事节奏&#xff0c;人为制造冲突、转折、卡顿的效果。这种剪辑方式&#xff0c;不仅可以推进剧情发展&#xff0c;还能吸引观众的注意力&#xff0c;有效防止观影疲劳。有关剪辑抽帧技巧有哪些&#xff0c;剪辑…

Typora篇-忍痛开启

语雀专业会员即将到期, 我看着99元的学费款, 我决定重新用回Typora。 虽然里面有一些文件但是我还是舍不得ಥ_ಥ 99元巨款。 下面开启我的Typora整活历程&#xff0c; 大家有什么好用的插件快捷方式一起来分享啊。

MyBatis框架学习笔记(二):原生API 的调用 和 注解的使用

1 MyBatis原生API 1.1 原生API 快速入门需求 在笔记一案例的基础上将增删改查&#xff0c;使用 MyBatis 原生的 API 完成&#xff0c;就是直接通过SqlSession 接口的方法来完成 1.2 原生API 快速入门-代码实现 创建 src\test\java\com\hspedu\mapper\MyBatisNativeTest.jav…

uni-app 封装http请求

1.引言 前面一篇文章写了使用Pinia进行全局状态管理。 这篇文章主要介绍一下封装http请求&#xff0c;发送数据请求到服务端进行数据的获取。 感谢&#xff1a; 1.yudao-mall-uniapp: 芋道商城&#xff0c;基于 Vue Uniapp 实现&#xff0c;支持分销、拼团、砍价、秒杀、优…

实用性提升百分之一百!!!【ONLYOFFICE 8.1版本】全方位深度性能测评

目录 【ONLYOFFICE 8.1 版本】全方位深度性能测评 一、界面与用户体验 二、文字处理功能 表格处理功能 演示文稿功能 协作与共享功能 性能与稳定性 总结 【ONLYOFFICE 8.1 版本】全方位深度性能测评 在当今数字化办公的时代&#xff0c;办公软件的选择对于提高工作效率和…

selenium处理cookie问题实战

1. cookie获取不完整 需要进入的资损平台(web)首页&#xff0c;才会出现有效的ctoken等信息 1.1. 原因说明 未进入指定页面而获取的 cookie 与进入页面后获取的 cookie 可能会有一些差异&#xff0c;这取决于网站的具体实现和 cookie 的设置方式。 通常情况下&#xff0c;一些…

【解决Windows11系统Windows Hello不能使用的问题】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Windows Hello是什么&#xff1f;二、使用步骤1.购买一个摄像头2.开始配置 三、异常解决1.内置管理员不能使用2.没找到合适的摄像头3.摄像头需要专用驱动4.…

原创作品——教育课程界面设计

教育行业UI界面设计需直观易懂&#xff0c;确保学习者能迅速上手&#xff0c;减少认知负担。布局清晰&#xff0c;导航便捷&#xff0c;功能按钮和图标设计应符合教育场景&#xff0c;直接支持学习目标的达成&#xff0c;促进高效学习体验。 通过丰富的互动元素&#xff08;如拖…

博途通讯笔记1:1200与1200之间S7通讯

目录 一、添加子网连接二、创建PUT GET三、各个参数的意义 一、添加子网连接 二、创建PUT GET 三、各个参数的意义

代码随想录(day1)二分法

if语句的基本语法 if 要判断的条件: 条件成立的时候&#xff0c;要做的事举例&#xff1a; if nums[middle]<target:leftmiddle1 while语句的基本语法&#xff1a; while 判断条件(condition)&#xff1a;执行语句(statements)举例&#xff1a; while left<right:midd…

2通道音频ADC解码芯片ES7243L、ES7243E、ES7243,用于低成本实现模拟麦克风转换为IIS数字话筒

前言&#xff1a; 音频解码芯片某创参考价格&#xff1a; ES7243L 500&#xff1a;&#xffe5;1.36 / 个 ES7243E 500&#xff1a;&#xffe5;1.66 / 个 ES7243 500&#xff1a; &#xffe5;1.91 / 个 其中ES7243L工作电压为1.8V&#xff0c;与其他两款的3.3V工作电压不同&…