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


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-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
vue.js实现只弹一次弹框
Jan 29 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
详解JavaScript 的执行机制
Sep 18 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
大师制作的中短波矿石收音机
2020/04/02 无线电
php设计模式 Singleton(单例模式)
2011/06/26 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
详解Python中的type()方法的使用
2015/05/21 Python
浅谈Python peewee 使用经验
2017/10/20 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
python实现黑客字幕雨效果
2018/06/21 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
python Django的web开发实例(入门)
2019/07/31 Python
Python collections模块使用方法详解
2019/08/28 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python绘制玫瑰的实现代码
2020/03/02 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
孔子观后感
2015/06/08 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
Pandas-DataFrame知识点汇总
2022/03/16 Python