博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序中父子组件间的通信与事件
阅读量:5031 次
发布时间:2019-06-12

本文共 1499 字,大约阅读时间需要 4 分钟。

 

以下示例,可自行体会..

 

子 - Component 

child.json

{  "component": true,  "usingComponents": {}}

child.wxml

 

child.js

Component({  /**   * 组件的属性列表   */  properties: {    dataFromParent: {      type: Array,      value: [],      observer: function (newVal, oldVal, changedPath) {        // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串        // 通常 newVal 就是新设置的数据, oldVal 是旧数据      }    }  },  /**   * 组件的初始数据   */  data: { },  /**   * 组件的方法列表   */  methods: {    onTapChild: function(event){      // detail对象,提供给事件监听函数      var myEventDetail = {        id: event.currentTarget.dataset.id      }       // 触发事件的选项      var myEventOption = {}       // 使用 triggerEvent 方法触发自定义组件事件,指定事件名、detail对象和事件选项      this.triggerEvent('parentEvent', myEventDetail, myEventOption)    }  }})

 

 

父 - Page

parent.json

{  "usingComponents": {    "child": "../component/child/child"  }}

项目目录结构:

 

 

parent.wxml

这里是父容器, dataFromParent是传递给子组件的数据, parentEvent是自定义组件可触发的事件名

可以用 bind:parentEvent  也可以 bindparentEvent 

 

parent.js

Page({  /**   * 页面的初始数据   */  data: {    contents: [      {        id: 1,        name: '点击第 1 个按钮'      },      {        id: 2,        name: '点击第 2 个按钮'      }    ]  },  // 当自定义组件触发 parentEvent 事件时,调用 onParentEvent 方法  onParentEvent: function (event) {    // 自定义组件触发事件时提供的detail对象,用来获取子组件传递来的数据    var id = event.detail.tag;    console.log('子组件传递来的数据 id:', id);    // 其他操作...  }})

 

转载于:https://www.cnblogs.com/yier0705/p/9679505.html

你可能感兴趣的文章
版本更新
查看>>
SQL 单引号转义
查看>>
实现手机扫描二维码页面登录,类似web微信-第三篇,手机客户端
查看>>
PHP socket客户端长连接
查看>>
7、shell函数
查看>>
【转】Apache Jmeter发送post请求
查看>>
【凸优化】保留凸性的几个方式(交集、仿射变换、投影、线性分式变换)
查看>>
NYOJ-613//HDU-1176-免费馅饼,数字三角形的兄弟~~
查看>>
TFS --- GrantBackup Plan Permissions Error
查看>>
软工作业3:用户体验分析——以“南通大学教务管理系统微信公众号”为例
查看>>
Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
查看>>
我们前端跟后端是怎么合作的
查看>>
mysql存储过程
查看>>
洛谷P2556 [AHOI2002] 黑白图像压缩 [模拟]
查看>>
letecode [136] - Single Number
查看>>
linux下设置固定IP的方法
查看>>
高效的jQuery
查看>>
ubuntu 16.04 (软件应用)-输入法
查看>>
windos7修复引导扇区
查看>>
Leetcode总结之Backtracking
查看>>