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


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 YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
小程序实现文字循环滚动动画
Jun 14 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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
php 中include()与require()的对比
2006/10/09 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
JavaScript中document对象使用详解
2015/01/06 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
Python 音频生成器的实现示例
2019/12/24 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
生产管理的三大手法
2013/11/11 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
创业计划书介绍
2019/04/24 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android