钉钉小程序父组件调用子组件方法(钉钉小程序踩坑实录)
钉钉小程序父组件调用子组件方法
- 页面到底部,父组件触发,调用子组件的方法,加载子组件的数据
解决方法
子组件里:
didMount() {this.$page.childComponent = this},
在加载生命周期里添加指向,
childComponent
就是名字,在你的父组件里才能找到。子组件方法:
methods: {childMethods(){console.log("hello")} }
子组件的方法就是正常写,也就是我们即将在父组件里调用的方法
父组件里:
/*** 页面被拉到底部* */onReachBottom() {this.childComponent.childMethods() //调用的子组件的方法},
父组件和子组件之间,怎么相互调用传值?
在小程序 page 页面,自定义组件可以通过 this.$page 拿到小程序页面实例,然后将组件实例挂载到小程序页面实例上进行相互调用。
- 将父组件、子组件分别挂载到所属页面实例上。
// 父组件 - /component/fu/fu.js
didMount() {this.$page.fu = this; // 通过此操作可以将组件实例挂载到所属页面实例上},
//子组件 - /component/zi/zi.js
didMount() {this.$page.zi = this; // 通过此操作可以将组件实例挂载到所属页面实例上},
- 通过页面实例实现相互调用。
小程序页面调用父组件、子组件方法:
//调用组件内 method 方法
this.zi.zimethod()
this.fu.fumethod()
//更改组件内data值
this.fu.setData({test:'123'})this.zi.setData({test:'123'})
父组件调用子组件内方法:
//调用子组件method方法
this.$page.zi.zimethod()
更改子组件内data值this.$page.zi.setData({test:'123'})
子组件调用父组件内方法 :
//调用父组件method方法
this.$page.fu.zimethod()
更改父组件内data值this.$page.fu.setData({test:'123'})
以下为解决问题的路程(骂人路程,可忽略不看)
- 钉钉文档写的真的一言难尽,有兴趣可以去观摩观摩,出自大师之手,真的看不懂:神仙钉钉文档
- 网络上查询只有一篇文章是写这个的,(唯一的文章)其他的都是天下文章一大抄,标题写父子通信,好家伙都只写子组件传值给父组件,完了父组件传值子组件都被吃了。
- 上面这个一篇文章提供的思路不错,但是传
this
过来之后再调用方法,方法的this
是指向父组件的,无法指向子组件,所以这个方法只能说在父组件里调用方法,子组件里的data数据都无法使用。 - 最后说一句,支付宝小程序文档YYDS!当你钉钉有问题时你就去支付宝吧!那里才是你永远的家。
钉钉小程序父组件调用子组件方法(钉钉小程序踩坑实录)相关推荐
- Vue中父组件调用子组件的方法
场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图: SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_ ...
- flutter父组件调用子组件方法
Key 概念参考前端react和vue中key值的含义,如果列表key不更改,则即便数据又修改视图也没有更改. ValueKey:以一个值为key. ObjectKey:以一个对象为key. Uniq ...
- Vue父组件调用子组件的方法并传参的两种方式(用$refs.refName.functionName、window.function)
如需了解儿子怎么控制老子的,传送门:https://s-z-q.blog.csdn.net/article/details/120094689 父组件father.vue <template&g ...
- vue父组件调用子组件的方法
vue组件与组件通信有如下几种情况: 平行组件 父组件与子组件 子组件与父组件 它们之间通信有几种方法有: props 自定义事件 vuex 今天我们聊一下父组件调用子组件的一种方法 parent.v ...
- vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...
- 【VUE实战问题记录】Vue 父组件调用子组件的使用方法
Vue前端项目父组件调用子组件的时候,调用方式如下: 父组件 <template><div><child ref="refChild">< ...
- vue中组件之间调用方法——子组件调用父组件的方法 父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
- vue3 setup语法糖下父组件调用子组件的方法
vue3下,父组件调用子组件的方法,如果使用了<script setup> 这种写法,那么子组件方法需要采用defineExpose()进行修饰,才能被外界调用.上代码: 1.子组件 _p ...
- react 父组件调用子组件方法--通过 props 实现
父组件中 // 引入子组件 import GlobalTable from '../globalComponents/global-table'export default class Assuran ...
最新文章
- 大型网站架构演变和知识体系--转
- html mint ui,vue mint-ui初次使用总结
- Hadoop实例之利用MapReduce实现Wordcount单词统计 (附源代码)
- mysql2008安装中文_Microsoft SQL Server 2008 R2 中文安装说明
- Sqlite error- INSERT failed: datatype mismatch
- 程序从高版本降到2.0,数据集报错 TypedTableBase
- Jackson 学习
- k8s核心技术-集群安全机制(RBAC介绍)---K8S_Google工作笔记0039
- 第五章节 类的继承(继承的概述)
- Oracle 11G GoldenGate实现Windows与Windows之间的单向同步
- Vue .sync 语法糖
- Sklearn常用数据预处理方法介绍
- Hacked Exam-Google Codejam 2021 Round 1A
- 7-23 清点代码库(简洁AC+多方法)
- Android 9.0 新特性
- python自动定期清理日志脚本支持Linux+windows
- 直流电源系统模块组成,直流电源系统作用
- 关于项目的可行性分析
- fopen中mode参数 r, w, a, r+, w+, a+ 具体区别(转)
- USB扫描枪设置流程 扫描枪使用