詳解微信小程序中組件通訊
更新時(shí)間：2018年10月30日 08:36:39 投稿：laozhang
在本篇文章里我們給大家分享了微信小程序中組件通訊的相關(guān)知識(shí)點(diǎn)以及相關(guān)實(shí)例代碼，有興趣的朋友們學(xué)習(xí)分享下。
這篇主要講組件通訊
（1）父組件向子組件傳值：
<header title='{{title}}' bind:fn='fn' id='header'></header>
通過title='{{title}}'傳向子組件向子組件傳遞參數(shù)
子組件接收參數(shù)：
Component({
properties: {
title: { // 屬性名 type: Number, // 類型（必填）
type: String,//目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
},
fn: {
type: Function,
},
},
data: {
},
methods: {
// 子組件調(diào)用父組件方法
childFn() {
console.log(this.data.title)
this.triggerEvent("fn");
//triggerEvent函數(shù)接受三個(gè)值：事件名稱、數(shù)據(jù)、選項(xiàng)值
}
}
})
methods使用title時(shí) this.data.title 直接就可以獲取到
通過 bind:fn='fn'傳向子組件向子組件傳遞方法
方法同樣也要在properties接收,methods里定義一個(gè)新方法, this.triggerEvent("fn") 接收父組件傳遞過來(lái)的方法
（2）父組件調(diào)用子組件數(shù)據(jù)及方法：
首先在父組件js onReady 生命周期中獲取到組件
onReady: function () {
//獲得popup組件
this.header= this.selectComponent("#header");
},
比如要調(diào)用子組件的一個(gè)function方法
// 調(diào)用子組件方法
fn(){
this.header.fn() //子組件的方法
},
調(diào)用子組件數(shù)據(jù)的話直接 this.header.msg 就可以拿到子組件的數(shù)據(jù)
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序繪制圖片發(fā)送朋友圈，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
js實(shí)現(xiàn)數(shù)組去重、判斷數(shù)組以及對(duì)象中的內(nèi)容是否相同
數(shù)組去重，判斷數(shù)組、對(duì)象中的內(nèi)容是否相同等等，在接下來(lái)的文章中使用js來(lái)簡(jiǎn)單實(shí)現(xiàn)下，感興趣的朋友不要錯(cuò)過2013-11-11
javascript實(shí)現(xiàn)全角轉(zhuǎn)半角的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)全角轉(zhuǎn)半角的方法,涉及JavaScript字符串遍歷與編碼轉(zhuǎn)換的相關(guān)技巧,需要的朋友可以參考下2016-01-01
Servlet實(shí)現(xiàn)文件上傳，可多文件上傳示例
本篇文章主要介紹了Servlet實(shí)現(xiàn)文件上傳，可多文件上傳示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-12-12
微信小程序動(dòng)態(tài)添加和刪除組件的現(xiàn)實(shí)
這篇文章主要介紹了微信小程序動(dòng)態(tài)添加和刪除組件的現(xiàn)實(shí)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
如何利用js實(shí)時(shí)監(jiān)聽input輸入框值的變化
在做web開發(fā)時(shí)候很多時(shí)候都需要即時(shí)監(jiān)聽輸入框值的變化,以便作出即時(shí)動(dòng)作去引導(dǎo)瀏覽者增強(qiáng)網(wǎng)站的用戶體驗(yàn)感,這篇文章主要給大家介紹了關(guān)于如何利用js實(shí)時(shí)監(jiān)聽input輸入框值的變化,需要的朋友可以參考下2024-02-02
小程序?qū)崿F(xiàn)抽獎(jiǎng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)抽獎(jiǎng)動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要為大家詳細(xì)介紹了用微信小程序?qū)崿F(xiàn)計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了微信小程序組件傳值圖示過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
JavaScript 瀏覽器對(duì)象模型BOM原理與常見用法實(shí)例分析
這篇文章主要介紹了JavaScript 瀏覽器對(duì)象模型BOM原理與常見用法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript瀏覽器對(duì)象模型BOM基本概念、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2019-12-12