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


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 相关文章推荐
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
js遍历td tr等html元素
Dec 13 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 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
解决File size limit exceeded 错误的方法
2013/06/14 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
python路径的写法及目录的获取方式
2019/12/26 Python
Python使用进程Process模块管理资源
2020/03/05 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
教师岗位职责范本
2013/12/29 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
军训考核自我鉴定
2014/02/13 职场文书
挂职自我鉴定
2014/02/26 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
Python与C++中梯度方向直方图的实现
2022/03/17 Python