微信小程序--頁面與組件之間如何進行信息傳遞和函數調用
這篇文章我會以我自己開發經驗從如下幾個角度來講解相關的內容
- 頁面如何向組件傳數據
- 組件如何向頁面傳數據
- 頁面如何調用組件內的函數
- 組件如何調用頁面內的函數
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];//獲取頁面，包括數據和方法
這部分內容出自我的一篇文章，我會把地址放在參考文件中。
結語：
組件和組件之間的數據傳遞和組件與頁面之間並沒有太大區別，組件中也可以嵌套組件。
參考文件