详解微信小程序中组件通讯
更新时间：2018年10月30日 08:36:39 投稿：laozhang
在本篇文章里我们给大家分享了微信小程序中组件通讯的相关知识点以及相关实例代码，有兴趣的朋友们学习分享下。
这篇主要讲组件通讯
（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字符串包含问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
js利用Array.splice实现Array的insert/remove
从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。2009-01-01
这篇文章主要给大家介绍了关于uniapp实现点击出现弹窗功能的相关资料,UniApp框架中提供了两种不同类型的弹出框,以帮助我们满足不同的需求,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了JavaScript中textRange对象使用方法小结,需要的朋友可以参考下2015-03-03
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题,这篇文章主要给大家介绍了关于JSONP跨域请求原理的相关资料,需要的朋友可以参考下2022-01-01
这篇文章介绍了JS文本框追加多个下拉框的值的例子，有需要的朋友可以参考一下2013-07-07
动态增加表格的方法有很多，但大多说实现起来比较繁琐，本文的这个示例是作者自己手写的，经测试效果还不错，但唯独不兼容FF，感兴趣的朋友可以参考下2013-10-10
下面小编就为大家带来一篇浅谈javascript中遇到的字符串对象处理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
主要是有些网站的图片调用是防盗链的但一般只是判断referer是不是自己网站，如果referer为空也会显示图片，所以有了下面的代码。2011-05-05
这篇文章主要为大家详细介绍了相册展示PhotoSwipe.js插件实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
最新评论