微信小程序頁面與組件之間信息傳遞與函數(shù)調(diào)用
這篇文章我會(huì)以我自己開發(fā)經(jīng)驗(yàn)從如下幾個(gè)角度來講解相關(guān)的內(nèi)容
- 頁面如何向組件傳數(shù)據(jù)
- 組件如何向頁面?zhèn)鲾?shù)據(jù)
- 頁面如何調(diào)用組件內(nèi)的函數(shù)
- 組件如何調(diào)用頁面內(nèi)的函數(shù)
1.頁面如何向組件傳數(shù)據(jù)
最常用,最規(guī)范的方式,設(shè)置數(shù)據(jù)監(jiān)聽器observer。
假設(shè)在頁面內(nèi)引入了組件sc
"usingComponents": { "sc":"" }
想要配置一個(gè)監(jiān)聽器用來監(jiān)聽頁面中數(shù)據(jù)list的變化,組件在頁面中的寫法如下:
<sc list="{{list}}" > </sc>
組件中的監(jiān)聽器寫法如下,當(dāng)頁面中的`list`值每次發(fā)生變化,都會(huì)觸發(fā)`observer`監(jiān)聽器,打印出變化值。
properties: { list:{ type:Array, observer: function (newVal, oldVal){ console.log(newVal) } } }
同理,除了動(dòng)態(tài)傳值以外,這種方式也可以直接傳入靜態(tài)值,即不需要調(diào)用obeserver監(jiān)聽器。在組件中可以直接使用this.properties.*來獲取properties中的各個(gè)值(*代表各個(gè)屬性值的名稱)。
2.組件如何向頁面?zhèn)鲾?shù)據(jù)
既然組件可以設(shè)置監(jiān)聽器用來監(jiān)聽頁面數(shù)據(jù)變化,用來達(dá)到數(shù)據(jù)傳遞的效果,頁面同樣可以使用監(jiān)聽器,來監(jiān)聽組件觸發(fā)的信息傳送。
仍然以上面的組件為例,如何向頁面中傳送信息?
在頁面中配置組件監(jiān)聽器
ComponentListener(e){ let info = e.detail; }
組件選擇事件并綁定該監(jiān)聽器
<sc bind:listener="ComponentListener" > </sc>
從組件中往頁面?zhèn)魅胼斎胫恍枰诮M件中觸發(fā)對應(yīng)事件,e.detail就是傳過去的數(shù)據(jù)
this.triggerEvent('listener',{func,tid});
3.頁面如何調(diào)用組件內(nèi)的函數(shù)
假設(shè)我們引入并使用了一個(gè)組件comment-bottom,組件內(nèi)有函數(shù)handleCloseInput,需要在某個(gè)邏輯中觸發(fā)。
想要使用組件內(nèi)的函數(shù),必須為組件配置一個(gè)唯一id,這樣就可以在頁面中通過dom操作選中組件并調(diào)用組件中的函數(shù)。
<comment-bottom id="commentBottom"></comment-bottom>
組件中的函數(shù)在頁面中的調(diào)用邏輯如下:
this.commentBottom = this.selectComponent("#commentBottom"); this.commentBottom.handleCloseInput();
4.組件如何調(diào)用頁面內(nèi)的函數(shù)
上面向頁面?zhèn)鲾?shù)據(jù)的方式,實(shí)際上就是調(diào)用了頁面中的函數(shù)。我們可以這樣理解該邏輯,將該用法理解為一個(gè)函數(shù)映射。
<component bind:componentfunc="pagefun"></component>
當(dāng)使用trigger觸發(fā)componentfunc時(shí),通過bind:這個(gè)函數(shù)映射關(guān)系,就會(huì)觸發(fā)頁面中的pagefunc。
其次,調(diào)用頁面內(nèi)的函數(shù),還可以通過頁面棧的方式,組件并不占用頁面的棧空間,因此在組件中使用getCurrentPages就可以獲得對應(yīng)頁面的數(shù)據(jù)和方法。
var allpages = getCurrentPages();//獲取全部頁面數(shù)據(jù) var nowpage = allpages[allpages.length - 1].data;//獲取當(dāng)前頁面的數(shù)據(jù)。 var nowpage = allpages[allpages.length - 1];//獲取頁面,包括數(shù)據(jù)和方法
這部分內(nèi)容出自我的一篇文章,我會(huì)把地址放在參考文件中。
結(jié)語:
組件和組件之間的數(shù)據(jù)傳遞和組件與頁面之間并沒有太大區(qū)別,組件中也可以嵌套組件。
參考文件
微信小程序開發(fā)技巧總結(jié) (一)-- 數(shù)據(jù)傳遞和存儲
到此這篇關(guān)于微信小程序頁面與組件之間信息傳遞與函數(shù)調(diào)用的文章就介紹到這了,更多相關(guān)微信小程序頁面與組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 微信小程序 wx.request(接口調(diào)用方式)詳解及實(shí)例
- 微信小程序調(diào)用攝像頭隱藏式拍照功能
- 微信小程序頁面調(diào)用自定義組件內(nèi)的事件詳解
- 微信小程序如何調(diào)用json數(shù)據(jù)接口并解析
- 微信小程序調(diào)用攝像頭實(shí)現(xiàn)拍照功能
- 微信小程序調(diào)用微信登陸獲取openid及java做為服務(wù)端示例
- 微信小程序調(diào)用支付接口的完整流程記錄
- 使用微信小程序API,調(diào)用微信的各種內(nèi)置能力。
- 微信小程序開發(fā)打開另一個(gè)小程序的實(shí)現(xiàn)方法
- 微信外喚起微信小程序的方法詳解
相關(guān)文章
JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片實(shí)例代碼
大家都知道Swiper(Swiper master)是目前應(yīng)用較廣泛的移動(dòng)端網(wǎng)頁觸摸內(nèi)容滑動(dòng)js插件。下面這篇文章主要給大家介紹了在JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片的相關(guān)資料,文中給出了完整的示例代碼供大家參考學(xué)習(xí),需要的朋友可以參考借鑒,下面來一起看看吧。2017-08-08JS基于HTML5的canvas標(biāo)簽實(shí)現(xiàn)炫目的色相球動(dòng)畫效果實(shí)例
這篇文章主要介紹了JS基于HTML5的canvas標(biāo)簽實(shí)現(xiàn)色相球效果,結(jié)合實(shí)例形式分析了基于canvas標(biāo)簽實(shí)現(xiàn)圖形繪制的相關(guān)操作技巧,需要的朋友可以參考下2016-08-08通過Javascript將數(shù)據(jù)導(dǎo)出到外部Excel文檔的函數(shù)代碼
通過Javascript將數(shù)據(jù)導(dǎo)出到外部Excel文檔的函數(shù)代碼,需要的朋友可以參考下2012-06-064 種滾動(dòng)吸頂實(shí)現(xiàn)方式的比較
這篇文章主要介紹了4種滾動(dòng)吸頂實(shí)現(xiàn)方式的比較,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04