微信小程序--頁面與組件之間如何進行信息傳遞和函數調用

微信小程序--頁面與組件之間如何進行信息傳遞和函數調用

​ 這篇文章我會以我本身開發經驗從以下幾個角度來說解相關的內容

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];//獲取頁面，包括數據和方法

​ 這部份內容出自個人一篇文章，我會把地址放在參考文件中。

---

結語：

組件和組件之間的數據傳遞和組件與頁面之間並無太大區別，組件中也能夠嵌套組件。

參考文件

微信小程序開發技巧總結 （一）-- 數據傳遞和存儲