詳解微信小程序中組件通訊
更新時間：2018年10月30日 08:36:39 投稿：laozhang
在本篇文章里我們給大家分享了微信小程序中組件通訊的相關知識點以及相關實例代碼，有興趣的朋友們學習分享下。
這篇主要講組件通訊
（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: {
// 子組件調用父組件方法
childFn() {
console.log(this.data.title)
this.triggerEvent("fn");
//triggerEvent函數(shù)接受三個值：事件名稱、數(shù)據(jù)、選項值
}
}
})
methods使用title時 this.data.title 直接就可以獲取到
通過 bind:fn='fn'傳向子組件向子組件傳遞方法
方法同樣也要在properties接收,methods里定義一個新方法, this.triggerEvent("fn") 接收父組件傳遞過來的方法
（2）父組件調用子組件數(shù)據(jù)及方法：
首先在父組件js onReady 生命周期中獲取到組件
onReady: function () {
//獲得popup組件
this.header= this.selectComponent("#header");
},
比如要調用子組件的一個function方法
// 調用子組件方法
fn(){
this.header.fn() //子組件的方法
},
調用子組件數(shù)據(jù)的話直接 this.header.msg 就可以拿到子組件的數(shù)據(jù)
相關文章
這篇文章主要介紹了JavaScript字符串包含問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
js利用Array.splice實現(xiàn)Array的insert/remove
從一個數(shù)組中移除一個或多個元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。2009-01-01
uniapp實現(xiàn)點擊出現(xiàn)彈窗功能實例
這篇文章主要給大家介紹了關于uniapp實現(xiàn)點擊出現(xiàn)彈窗功能的相關資料,UniApp框架中提供了兩種不同類型的彈出框,以幫助我們滿足不同的需求,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了JavaScript中textRange對象使用方法小結,需要的朋友可以參考下2015-03-03
JSONP(JSON?with?Padding)是JSON的一種“使用模式”,可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題,這篇文章主要給大家介紹了關于JSONP跨域請求原理的相關資料,需要的朋友可以參考下2022-01-01
這篇文章介紹了JS文本框追加多個下拉框的值的例子，有需要的朋友可以參考一下2013-07-07
動態(tài)增加表格的方法有很多，但大多說實現(xiàn)起來比較繁瑣，本文的這個示例是作者自己手寫的，經(jīng)測試效果還不錯，但唯獨不兼容FF，感興趣的朋友可以參考下2013-10-10
下面小編就為大家?guī)硪黄獪\談javascript中遇到的字符串對象處理。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
部分網(wǎng)站允許空白referer的防盜鏈圖片的js破解代碼
主要是有些網(wǎng)站的圖片調用是防盜鏈的但一般只是判斷referer是不是自己網(wǎng)站，如果referer為空也會顯示圖片，所以有了下面的代碼。2011-05-05
這篇文章主要為大家詳細介紹了相冊展示PhotoSwipe.js插件實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08