详解微信小程序中组件通讯


Posted in Javascript onOctober 30, 2018

这篇主要讲组件通讯

(1)父组件向子组件传值:

<header title='{{title}}' bind:fn='fn' id='header'></header>

通过title='{{title}}'传向子组件向子组件传递参数

子组件接收参数:

Component({
 properties: {
  title: {    // 属性名 type: Number, // 类型(必填)
   type: String,//目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
  },
  fn: {   
   type: Function,
  },
 },
 data: {
    
 },
 methods: {
  // 子组件调用父组件方法
  childFn() {
   console.log(this.data.title)
   this.triggerEvent("fn");
   //triggerEvent函数接受三个值:事件名称、数据、选项值 
  }
 }
})

methods使用title时 this.data.title 直接就可以获取到

通过 bind:fn='fn'传向子组件向子组件传递方法

方法同样也要在properties接收,methods里定义一个新方法, this.triggerEvent("fn") 接收父组件传递过来的方法

(2)父组件调用子组件数据及方法:

首先在父组件js onReady 生命周期中获取到组件

onReady: function () {
  //获得popup组件
  this.header= this.selectComponent("#header");
},

比如要调用子组件的一个function方法

// 调用子组件方法
 fn(){
  this.header.fn() //子组件的方法
 },

调用子组件数据的话直接 this.header.msg 就可以拿到子组件的数据

Javascript 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
js活用事件触发对象动作
Aug 10 Javascript
javascript 禁止复制网页
Jun 11 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
JavaScript 五大常见函数
Mar 23 Javascript
vue移动端项目缓存问题实践记录
Oct 29 #Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 #Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 #Javascript
vue-router权限控制(简单方式)
Oct 29 #Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 #Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 #Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 #Javascript
You might like
基于empty函数的输出详解
2013/06/17 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
浅谈php调用python文件
2019/03/29 PHP
纯js分页代码(简洁实用)
2013/11/05 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
行政人员岗位职责
2013/12/08 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
英语老师推荐信
2014/02/26 职场文书
人事部岗位职责范本
2014/03/05 职场文书
春节超市活动方案
2014/08/14 职场文书
普通党员整改措施
2014/10/24 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB
MySQL 5.7常见数据类型
2021/07/15 MySQL