1. 頁面如(rú)何向組件傳數據
2. 組件如(rú)何向頁面傳數據
3. 頁面如(rú)何調用組件内的函數
4. 組件如(rú)何調用頁面内的函數

1.頁面如(rú)何向組件傳數據

? 最常用，最規範的方式，設置數據監聽器(qì)observer。

? 假設在頁面内引入了組件sc

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

? 想要配置一個(gè)監聽器(qì)用來監聽頁面中(zhōng)數據list的變化，組件在頁面中(zhōng)的寫法如(rú)下(xià)：

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

組件中(zhōng)的監聽器(qì)寫法如(rú)下(xià)，當頁面中(zhōng)的`list`值每次發生變化，都會觸發`observer`監聽器(qì)，打印出變化值。

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

? 同理，除了動(dòng)态傳值以外，這種方式也可(kě)以直接傳入靜态值，即不需要調用obeserver監聽器(qì)。在組件中(zhōng)可(kě)以直接使用this.properties.*來獲取properties中(zhōng)的各個(gè)值(*代表各個(gè)屬性值的名稱)。

2.組件如(rú)何向頁面傳數據

? 既然組件可(kě)以設置監聽器(qì)用來監聽頁面數據變化，用來達到數據傳遞的效果，頁面同樣可(kě)以使用監聽器(qì)，來監聽組件觸發的信息傳送。

仍然以上面的組件為例，如(rú)何向頁面中(zhōng)傳送信息？

? 在頁面中(zhōng)配置組件監聽器(qì)

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

? 組件選擇事件并綁定該監聽器(qì)

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

? 從組件中(zhōng)往頁面傳入輸入隻需要在組件中(zhōng)觸發對應事件，e.detail就是傳過去的數據

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

3.頁面如(rú)何調用組件内的函數

? 假設我們引入并使用了一個(gè)組件comment-bottom，組件内有函數handleCloseInput，需要在某個(gè)邏輯中(zhōng)觸發。

想要使用組件内的函數，必須為組件配置一個(gè)唯一id，這樣就可(kě)以在頁面中(zhōng)通(tōng)過dom操作選中(zhōng)組件并調用組件中(zhōng)的函數。

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

? 組件中(zhōng)的函數在頁面中(zhōng)的調用邏輯如(rú)下(xià)：

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

4.組件如(rú)何調用頁面内的函數

? 上面向頁面傳數據的方式，實際上就是調用了頁面中(zhōng)的函數。我們可(kě)以這樣理解該邏輯，将該用法理解為一個(gè)函數映射。

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

? 當使用trigger觸發componentfunc時，通(tōng)過bind:這個(gè)函數映射關(guān)系，就會觸發頁面中(zhōng)的pagefunc。

? 其次，調用頁面内的函數，還可(kě)以通(tōng)過頁面棧的方式，組件并不占用頁面的棧空間，因此在組件中(zhōng)使用getCurrentPages就可(kě)以獲得對應頁面的數據和(hé)方法。

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

? 這部分内容出自我的一篇文(wén)章，我會把地址放在參考文(wén)件中(zhōng)。

---

結語：

組件和(hé)組件之間的數據傳遞和(hé)組件與頁面之間并沒有太大區别，組件中(zhōng)也可(kě)以嵌套組件。