uni-app父子组件间的方法调用及传值

文章目录

          • 一、父组件调用子组件里的方法
            • 1. 先准备一个子组件
            • 2. 准备一个父组件
          • 二、子组件调用父组件里的方法
            • 2.1. 准备一个父组件
            • 2.2. 在准备一个子组件
          • 三、父组件给子组件传值
            • 3.1. 父组件:
            • 3.2. 子组件:
          • 四、子组件给父组件传值
            • 4.1. 父组件
            • 4.2.子组件

uni-app父子组件间的方法调用及传值
方法调用:

一、父组件调用子组件里的方法
1. 先准备一个子组件
<template><view></view>
</template><script>export default {data(){return {}},methods:{childMethod() {  // 子组件中有一个childMethod方法console.log('childMethod do...')}}}
</script>
2. 准备一个父组件
<template><view class="content"><mian-index ref="mainindex"></mian-index> //使用子组件,ref给子组件一个id标识</view>
</template>
<script>import mainindex from '@/pages/main/index/index.vue'  //引入子组件export default {data() {return {};},components:{'mian-index':mainindex},onLoad(e) {this.$refs.mainindex.childMethod();  //页面加载时就调用子组件里的childMethod方法}}
</script>

参考地址:https://www.cnblogs.com/cap-rq/p/11026881.html

二、子组件调用父组件里的方法
2.1. 准备一个父组件
<template><view class="father"><child v-on:ToChange="change"></child>  // 在使用子组件时,通过v-on绑定在父组件内定义好的方法</view>
</template><script>import child from '../../components/child'  //引入子组件export default { ...methods: {change(){  // 在父组件内定义好的方法console.log("触发了父页面内的方法");},},components:{child}}
</script>
2.2. 在准备一个子组件
<template><view @tap="changeC()">  // 在子组件内绑定触发子组件内定义的方法子组件</view>
</template><script>export default {...methods:{changeC(type){this.$emit("Tochange");  // 通过this.$emit触发父组件内绑定的方法console.log("触发了子组件内的方法");}}}
</script>

参考地址:https://blog.csdn.net/Sport_18/article/details/102833209

传值:

三、父组件给子组件传值
3.1. 父组件:
<template><view><test :msg="msg"></test>  // :msg="msg"绑定传值</view>
</template><script>import test from "@/components/test/test.vue"  // 引入子组件export default {data () {return {msg: 'hello'}},components: {test}}
</script>
3.2. 子组件:
<template><view>子组件 {{msg}}  //接收后使用</view>
</template><script>export default {props: ['msg']  //通过props接收数据}
</script><style>
</style>
四、子组件给父组件传值
4.1. 父组件
<template><view><test @myEvent="getMsg"></test></view>
</template>
<script>import test from "@/components/test/test.vue"   // 引入子组件export default {methods: {getMsg (res) {console.log(res)}},components: {test}}
</script>
4.2.子组件
<template><view><button type="primary" @click="sendMsg">给父组件传值</button></view>
</template><script>export default {data () {return {status: 'hello uni-app'}},methods: {sendMsg () {this.$emit('myEvent',this.status)  // 通过$emit触发事件,第二个参数就是传递的参数}}}
</script>

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

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

相关文章

如何三步搭建一套声纹系统

背景介绍 声纹检索&#xff0c;顾名思义就是说话人识别&#xff0c;通过声音来验证或者识别说话人的声音。声纹识别的关键步骤就是声音向量化&#xff0c;将说话人的声音将其转化成结构化的向量。阿里云AnalyticDB向量版&#xff0c;提供了一套声纹验证检索的解决方案。用户只…

云原生人物志|Pulsar翟佳:社区的信任最重要

云原生已无处不在&#xff0c;《云原生人物志》是CSDN重磅推出的系列原创采访&#xff0c;我们关注云原生中每一个技术人、公司的身影。知微见著&#xff0c;窥见云原生价值与趋势。 编辑 | 宋 慧 出品 | CSDN云计算 头图 | 付费下载于视觉中国 本期我们采访了 Apache 顶级项目…

如何为Kubernetes实现原地升级

作者 | 王思宇&#xff08;酒祝&#xff09; 阿里云技术专家 参与阿里巴巴云原生文末留言互动&#xff0c;即有机会获得赠书福利及作者答疑&#xff01; 概念介绍 原地升级一词中&#xff0c;“升级”不难理解&#xff0c;是将应用实例的版本由旧版替换为新版。那么如何结合…

uniapp实现表单提交带图片上传 在做表单提交的时候,我们可能面临有图片上传,放在原生的html就好解决,form标签加上

enctype“multipart/form-data” uniapp微信小程序 1.原图 页面部分 <form :model"data" submit"submit" reset""><view class"top bgbai u-m-t-30" :class"{disabled: !isaction && data.renz.id}">…

系统架构设计师 - 单体架构、SOA架构、微服务架构

文章目录横向对比SOA设计原则主要技术UDDI 统一描述发现集成SOAP 简单对象访问协议WSDL web服务描述语言BPEL 业务过程执行语言REST 表述性状态转移实现方法WebServiceESB服务注册表主要问题横向对比 单体架构SOA架构微服务架构特点复杂性高、技术债务逐渐上升、部署速度越来越…

Java字符串连接运算符干了什么?

和其他多数程序设计语言一样&#xff0c;Java 语言允许使用 连接两个字符串。 String name "stephen"; String foo "Hey, " name; 当我们将一个字符串和一个非字符串的值进行拼接时&#xff0c;并不会报错&#xff1a; String name "Stephen&…

文件上传问题org.springframework.web.HttpMediaTypeNotSupportedException: Content type ‘multipart/form-data;

接收表单使用对象接收时不要使用注解 /*** 单文件上传&#xff08;微信小程序只支持单文件上传&#xff09;** param file* return* throws Exception*/PostMapping("/filesUpload")public R uploadFile(FormDataReq f, RequestParam("file") MultipartFil…

灵魂拷问:a = 1 + 2 究竟是怎么被 CPU 执行的

来源 | 小林coding作者 | 小林coding头图 | 下载于视觉中国代码写了那么多&#xff0c;你知道 a 1 2 这条代码是怎么被 CPU 执行的吗&#xff1f;软件用了那么多&#xff0c;你知道软件的 32 位和 64 位之间的区别吗&#xff1f;再来 32 位的操作系统可以运行在 64 位的电脑上…

如何利用全站加速,提升网站性能和用户体验?

随着网络技术的发展&#xff0c;越来越多的应用基于互联网发布&#xff0c;再好的应用&#xff0c;如果打开速度慢&#xff0c;10个用户会有9个用户选择离开&#xff0c;相关统计数据显示&#xff0c;每增加0.1秒的加载延迟&#xff0c;将会导致客户活跃度下降1%。在目前获客成…

IDEA 搭建 SpringBoot + Maven + Oracle + Hibernate 项目框架

1.Spring Initializer 创建空项目 2.安装Oracle 3.查询Oracle版本 select * from product_component_version;4.安装Oracle驱动并引入pom 5.添加yml配置文件 server:port: 8989 spring:datasource:driver-class-name: oracle.jdbc.OracleDriverurl: jdbc:oracle:thin:127.0.0…

1418 -This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration

今天在mysql中创建函数的时候&#xff0c;报错如下&#xff1a; ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary logging is enabled (you might want to use the less safe log_bin_trust_function_…

最近,老王又Get了CDN的新技能

原文链接 本文为云栖社区原创内容&#xff0c;未经允许不得转载。

线程池 总结

文章目录线程池优点线程池创建参数队列种类同步移交队列有界队列无界队列拒绝策略DiscardPolicyAbortPolicyDiscardOldestPolicyCallerRunsPolicy线程池执行流程线程池类型定长 FixedThreadPool轮询 ScheduledThreadPool缓存 CachedThreadPool单线程 SingleThreadPool线程池优点…

阿里的 RocketMQ 如何让双十一峰值之下0故障

作者 | 愈安来源 | 阿里巴巴中间件头图 | 下载于视觉中国2020 年的双十一交易峰值达到 58.3 W笔/秒&#xff0c;消息中间件 RocketMQ 继续数年 0 故障丝般顺滑地完美支持了整个集团大促的各类业务平稳。相比往年&#xff0c;消息中间件 RocketMQ 发生了以下几个方面的变化&…

OAM深入解读:使用OAM定义与管理Kubernetes内置Workload

作者 | 周正喜 阿里云技术专家 爱好云原生&#xff0c;深度参与 OAM 社区 大家都知道&#xff0c;应用开放模型 Open Application Model&#xff08;OAM&#xff09; 将应用的工作负载&#xff08;Workload&#xff09;分为三种 —— 核心型、标准型和扩展型&#xff0c;这三…

oracle 指定类型和指定位数创建序列号

文章目录一、脚本部分1. 表结构2. 函数二、代码部分2.1. xml2.2. 接口2.3. api接口2.4. api实例2.5. 控制层三、测试3.1. 效果图一、脚本部分 1. 表结构 有注释 -- Create table create table LDMAXNO (NOTYPE VARCHAR2(17) not null,NOLIMIT VARCHAR2(12) not null,MAXNO …

深入解读Flink资源管理机制

作者&#xff1a;宋辛童&#xff08;五藏&#xff09;整理&#xff1a;王文杰&#xff08;Flink 社区志愿者&#xff09; 摘要&#xff1a;本文根据 Apache Flink 系列直播整理而成&#xff0c;由阿里巴巴高级开发工程师宋辛童分享。文章主要从基本概念、当前机制与策略、未来发…

EasyExcel 实现模板导出、模板导入分析功能

文章目录0.POM依赖1.导出模板实现2.导入模板并分析实现3.git源码0.POM依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><dependency>…

金蝶云拿下客户满意度第一,中国SaaS企业觅得“后发先至”良机

本月&#xff0c;全球SaaS行业迎来了开年第一份重磅奖项的揭晓&#xff1a;由国际知名研究机构IDC颁发的SaaS行业全球客户满意度奖&#xff08;CSAT大奖&#xff09;。 该奖项基于IDC SaaSPath针对全球约2000家组织机构中高层的调研&#xff0c;综合30多项客户满意度指标&…

一名创业者浴火涅磐的自白——对话阿里云MVP孙琦

云栖号资讯&#xff1a;【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01; 简介&#xff1a; 孙琦喜欢调侃自己为“一个失败的创业者”。跟他聊过之后&#xff0c;我却发现他跟以往的创业者不同&#x…