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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.頁面如何調用組件內的函數(shù)

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

想要使用組件內的函數(shù)，必須為組件配置一個唯一id，這樣就可以在頁面中通過dom操作選中組件并調用組件中的函數(shù)。

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

 組件中的函數(shù)在頁面中的調用邏輯如下：

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

4.組件如何調用頁面內的函數(shù)​

上面向頁面?zhèn)鲾?shù)據(jù)的方式，實際上就是調用了頁面中的函數(shù)。我們可以這樣理解該邏輯，將該用法理解為一個函數(shù)映射。

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

​ 當使用trigger觸發(fā)componentfunc時，通過bind:這個函數(shù)映射關系，就會觸發(fā)頁面中的pagefunc。

​ 其次，調用頁面內的函數(shù)，還可以通過頁面棧的方式，組件并不占用頁面的?？臻g，因此在組件中使用getCurrentPages就可以獲得對應頁面的數(shù)據(jù)和方法。

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

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

結語：

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

參考文件

微信小程序開發(fā)技巧總結 （一）-- 數(shù)據(jù)傳遞和存儲

到此這篇關于微信小程序頁面與組件之間信息傳遞與函數(shù)調用的文章就介紹到這了,更多相關微信小程序頁面與組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論