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


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知识点二 jquery下对数组的操作
Jan 15 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
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小技巧之函数重载
2014/06/02 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
基于Python os模块常用命令介绍
2017/11/03 Python
利用python如何处理nc数据详解
2018/05/23 Python
python3爬虫之设计签名小程序
2018/06/19 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
特步官方商城:Xtep
2017/03/21 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
车间调度岗位职责
2013/11/30 职场文书
物流专业求职计划书
2014/01/10 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书