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


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让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
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
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
CI框架常用方法小结
2016/05/17 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
python中__slots__用法实例
2015/06/04 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
pandas的相关系数与协方差实例
2019/12/27 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
置业顾问岗位职责
2015/02/09 职场文书
整改通知书格式
2015/04/22 职场文书
美丽的大脚观后感
2015/06/03 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书