1、组件间通信与事件
1、组件间通信
组件间的基本通信方式有以下几种。
WXML 数据绑定:用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容数据(自基础库版本 2.0.9 开始,还可以在数据中包含函数)。具体在 组件模板和样式 章节中介绍。
事件绑定:用于子组件向父组件传递数据,可以传递任意数据。
如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。
2、监听事件
事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件,引用组件的页面可以监听这些事件。关于事件的基本概念和用法,参见 事件 。
监听自定义组件事件的方法与监听基础组件事件的方法完全一致:
2、组件通信共三种方式
1、父组件向子组件传值代码示例:
说明:父组件向子组件传值,通过 “组件的属性列表” properties
组件属性列表值,是单向绑定,内部修改组件属性不会同步显示;
组件外部 (父组件) 修改组件属性,内部展示跟着修改。
子组件test模板,代码:
![](https://i-blog.csdnimg.cn/blog_migrate/bab0c11bd5dc6c147f908daaf2eb6533.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0369a00287c7ad89b033e488234d1e85.png)
父组件democom,代码:
![](https://i-blog.csdnimg.cn/blog_migrate/6ba2b13c8abfbf0621d3ca119c897a9b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/116054b69114f6cb58e8ad55d4b988c6.png)
2、子组件向父组件传值代码示例:
•事件:用于子组件向父组件传递数据,可以传递任意数据
子组件yang.wxml代码:
![](https://i-blog.csdnimg.cn/blog_migrate/0415d857040724a9d98fbc347f106856.png)
子组件yang.js代码:
![](https://i-blog.csdnimg.cn/blog_migrate/65eecf7713d08830cf05ae87697a287f.png)
父组件home.wxml代码
![](https://i-blog.csdnimg.cn/blog_migrate/04e43f4e66416e3fcedb6be98e32a316.png)
父组件home.json代码
![](https://i-blog.csdnimg.cn/blog_migrate/771b51b2577816816727184b6988e0c1.png)
父组件home.js代码
![](https://i-blog.csdnimg.cn/blog_migrate/afb32233790fcd4cce85576b648a21e5.png)
最后效果:
![](https://i-blog.csdnimg.cn/blog_migrate/4dd4543c88a0cf385c22ce41a48eaef1.png)
其执行过程是:子组件的点击事件bindtap,其实是由父组件的gianbian
方法去执行,并且传递了数据到父组件的detail
3、使用微信小程序全局变量
小程序的全局变量存储在文件 app.js 的globalData对象中,用于不同页面之间传递数据,如定义一个全局变量price
![](https://i-blog.csdnimg.cn/blog_migrate/9d2ef8396dc676b431660feae4a97c5c.png)
在home中页面使用全局变量
![](https://i-blog.csdnimg.cn/blog_migrate/0fe03cf37cd34497617c23385160eb11.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8d38ece1efbf76819b32dc3e4705f731.png)