微信小程式--頁面與元件之間如何進行資訊傳遞和函式呼叫

Kindear發表於2020-12-28
微信小程式元件函式

微信小程式--頁面與元件之間如何進行資訊傳遞和函式呼叫

​ 這篇文章我會以我自己開發經驗從如下幾個角度來講解相關的內容

  1. 頁面如何向元件傳資料
  2. 元件如何向頁面傳資料
  3. 頁面如何呼叫元件內的函式
  4. 元件如何呼叫頁面內的函式

1.頁面如何向元件傳資料

​ 最常用，最規範的方式，設定資料監聽器observer。

​ 假設在頁面內引入了元件sc

"usingComponents": {
    "sc":""
 }

​ 想要配置一個監聽器用來監聽頁面中資料list的變化，元件在頁面中的寫法如下：

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

元件中的監聽器寫法如下，當頁面中的`list`值每次發生變化，都會觸發`observer`監聽器，列印出變化值。

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

​ 同理，除了動態傳值以外，這種方式也可以直接傳入靜態值，即不需要呼叫obeserver監聽器。在元件中可以直接使用this.properties.*來獲取properties中的各個值(*代表各個屬性值的名稱)。

2.元件如何向頁面傳資料

​ 既然元件可以設定監聽器用來監聽頁面資料變化，用來達到資料傳遞的效果，頁面同樣可以使用監聽器，來監聽元件觸發的資訊傳送。

仍然以上面的元件為例，如何向頁面中傳送資訊？

​ 在頁面中配置元件監聽器

ComponentListener(e){
    let info = e.detail;
 }

​ 元件選擇事件並繫結該監聽器

<sc
bind:listener="ComponentListener"
> 
</sc>

​ 從元件中往頁面傳入輸入只需要在元件中觸發對應事件，e.detail就是傳過去的資料

 this.triggerEvent('listener',{func,tid});

3.頁面如何呼叫元件內的函式

​ 假設我們引入並使用了一個元件comment-bottom，元件內有函式handleCloseInput，需要在某個邏輯中觸發。

想要使用元件內的函式，必須為元件配置一個唯一id，這樣就可以在頁面中通過dom操作選中元件並呼叫元件中的函式。

<comment-bottom id="commentBottom"></comment-bottom>

​ 元件中的函式在頁面中的呼叫邏輯如下：

this.commentBottom = this.selectComponent("#commentBottom");
this.commentBottom.handleCloseInput();

4.元件如何呼叫頁面內的函式

​ 上面向頁面傳資料的方式，實際上就是呼叫了頁面中的函式。我們可以這樣理解該邏輯，將該用法理解為一個函式對映。

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

​ 當使用trigger觸發componentfunc時，通過bind:這個函式對映關係，就會觸發頁面中的pagefunc。

​ 其次，呼叫頁面內的函式，還可以通過頁面棧的方式，元件並不佔用頁面的棧空間，因此在元件中使用getCurrentPages就可以獲得對應頁面的資料和方法。

var allpages = getCurrentPages();//獲取全部頁面資料
var nowpage = allpages[allpages.length - 1].data;//獲取當前頁面的資料。
var nowpage = allpages[allpages.length - 1];//獲取頁面，包括資料和方法

​ 這部分內容出自我的一篇文章，我會把地址放在參考檔案中。

結語：

元件和元件之間的資料傳遞和元件與頁面之間並沒有太大區別，元件中也可以巢狀元件。

參考檔案

微信小程式開發技巧總結 （一）-- 資料傳遞和儲存

相關文章