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

更新時間：2021年05月25日 10:18:50 作者：小の白菜

不管是vue還是react中,都在強調(diào)組件思想，所以下面這篇文章主要給大家介紹了關(guān)于微信小程序頁面與組件之間信息傳遞與函數(shù)調(diào)用的相關(guān)資料，需要的朋友可以參考下

這篇文章我會以我自己開發(fā)經(jīng)驗從如下幾個角度來講解相關(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":""
 }

想要配置一個監(jiān)聽器用來監(jiān)聽頁面中數(shù)據(jù)list的變化，組件在頁面中的寫法如下：

<sc
list="{{list}}"
>
</sc>

組件中的監(jiān)聽器寫法如下，當(dāng)頁面中的`list`值每次發(fā)生變化，都會觸發(fā)`observer`監(jiān)聽器，打印出變化值。

properties: {
    list:{
      type:Array,
      observer: function (newVal, oldVal){
        console.log(newVal)
      }
    }
}

同理，除了動態(tài)傳值以外，這種方式也可以直接傳入靜態(tài)值，即不需要調(diào)用obeserver監(jiān)聽器。在組件中可以直接使用this.properties.*來獲取properties中的各個值(*代表各個屬性值的名稱)。

2.組件如何向頁面?zhèn)鲾?shù)據(jù)

既然組件可以設(shè)置監(jiān)聽器用來監(jiān)聽頁面數(shù)據(jù)變化，用來達到數(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è)我們引入并使用了一個組件comment-bottom，組件內(nèi)有函數(shù)handleCloseInput，需要在某個邏輯中觸發(fā)。

想要使用組件內(nèi)的函數(shù)，必須為組件配置一個唯一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ù)的方式，實際上就是調(diào)用了頁面中的函數(shù)。我們可以這樣理解該邏輯，將該用法理解為一個函數(shù)映射。

<component bind:componentfunc="pagefun"></component>

當(dāng)使用trigger觸發(fā)componentfunc時，通過bind:這個函數(shù)映射關(guān)系，就會觸發(fā)頁面中的pagefunc。

其次，調(diào)用頁面內(nèi)的函數(shù)，還可以通過頁面棧的方式，組件并不占用頁面的?？臻g，因此在組件中使用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)容出自我的一篇文章，我會把地址放在參考文件中。