欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序頁面與組件之間信息傳遞與函數(shù)調(diào)用

 更新時(shí)間:2021年05月25日 10:18:50   作者:小の白菜  
不管是vue還是react中,都在強(qiáng)調(diào)組件思想,所以下面這篇文章主要給大家介紹了關(guān)于微信小程序頁面與組件之間信息傳遞與函數(shù)調(diào)用的相關(guān)資料,需要的朋友可以參考下

 這篇文章我會(huì)以我自己開發(fā)經(jīng)驗(yàn)從如下幾個(gè)角度來講解相關(guān)的內(nèi)容

  1. 頁面如何向組件傳數(shù)據(jù)
  2. 組件如何向頁面?zhèn)鲾?shù)據(jù)
  3. 頁面如何調(diào)用組件內(nèi)的函數(shù)
  4. 組件如何調(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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 淺談layer彈出層按鈕顏色修改方法

    淺談layer彈出層按鈕顏色修改方法

    今天小編就為大家分享一篇淺談layer彈出層按鈕顏色修改方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • js判斷字符是否是漢字的兩種方法小結(jié)

    js判斷字符是否是漢字的兩種方法小結(jié)

    本篇文章主要是對js判斷字符是否是漢字的兩種方法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-01-01
  • JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片實(shí)例代碼

    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-08
  • 你可能不需要在JavaScript使用switch語句

    你可能不需要在JavaScript使用switch語句

    這篇文章主要介紹了你可能不需要在JavaScript使用switch語句,對switch性能感興趣的同學(xué),可以參考下
    2021-04-04
  • JS基于HTML5的canvas標(biāo)簽實(shí)現(xiàn)炫目的色相球動(dòng)畫效果實(shí)例

    JS基于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
  • 微信小程序?qū)崿F(xiàn)搜索框功能

    微信小程序?qū)崿F(xiàn)搜索框功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)搜索框功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • 通過Javascript將數(shù)據(jù)導(dǎo)出到外部Excel文檔的函數(shù)代碼

    通過Javascript將數(shù)據(jù)導(dǎo)出到外部Excel文檔的函數(shù)代碼

    通過Javascript將數(shù)據(jù)導(dǎo)出到外部Excel文檔的函數(shù)代碼,需要的朋友可以參考下
    2012-06-06
  • javascript 線性漸變二

    javascript 線性漸變二

    上部分我們逐一分析了各瀏覽器的可行方法,這部分將搞鼓出一個(gè)統(tǒng)一的類來實(shí)現(xiàn)跨瀏覽器的線性漸變。
    2009-10-10
  • 對JavaScript中this指針的新理解分享

    對JavaScript中this指針的新理解分享

    這篇文章主要介紹了對JavaScript中this指針的新理解分享,本文講解了方法調(diào)用模式、函數(shù)調(diào)用模式、構(gòu)造函數(shù)調(diào)用模式、Apply調(diào)用模式中的this指針理解,需要的朋友可以參考下
    2015-01-01
  • 4 種滾動(dòng)吸頂實(shí)現(xiàn)方式的比較

    4 種滾動(dòng)吸頂實(shí)現(xiàn)方式的比較

    這篇文章主要介紹了4種滾動(dòng)吸頂實(shí)現(xiàn)方式的比較,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04

最新評論