1. 頁面如何向組件傳數(shù)據(jù)
2. 組件如何向頁面?zhèn)鲾?shù)據(jù)
3. 頁面如何調(diào)用組件內(nèi)的函數(shù)
4. 組件如何調(diào)用頁面內(nèi)的函數(shù)

1.頁面如何向組件傳數(shù)據(jù)

? 最常用，最規(guī)范的方式，設(shè)置數(shù)據(jù)監(jiān)聽器observer。

? 假設(shè)在頁面內(nèi)引入了組件sc

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

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

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

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

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

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

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

? 既然組件可以設(shè)置監(jiān)聽器用來監(jiān)聽頁面數(shù)據(jù)變化，用來達(dá)到數(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ā)對(duì)應(yīng)事件，e.detail就是傳過去的數(shù)據(jù)

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

3.頁面如何調(diào)用組件內(nèi)的函數(shù)

? 假設(shè)我們引入并使用了一個(gè)組件comment-bottom，組件內(nèi)有函數(shù)handleCloseInput，需要在某個(gè)邏輯中觸發(fā)。

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

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

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

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

---

結(jié)語：

組件和組件之間的數(shù)據(jù)傳遞和組件與頁面之間并沒有太大區(qū)別，組件中也可以嵌套組件。