这篇“微信小程序中如何实现组件通讯”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序中如何实现组件通讯”文章吧。
(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() //子组件的方法
},
以上就是关于“微信小程序中如何实现组件通讯”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://www.xuebuyuan.com/3285013.html