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


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 相关文章推荐
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
vue实现简单图片上传
Jun 30 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
Python中with及contextlib的用法详解
2017/06/08 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Python global全局变量函数详解
2018/09/18 Python
Python中请不要再用re.compile了
2019/06/30 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
python导入库的具体方法
2020/06/18 Python
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
应届毕业生通用的自荐书范文
2014/02/07 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
违反交通法规检讨书
2014/09/10 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
个人借条范本
2015/05/25 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
MySQL GTID复制的具体使用
2022/05/20 MySQL