### 微信小程式--頁面與元件之間如何進行資訊傳遞和函式呼叫 ​ 這篇文章我會以我自己開發經驗從如下幾個角度來講解相關的內容 1. 頁面如何向元件傳資料 2. 元件如何向頁面傳資料 3. 頁面如何呼叫元件內的函式 4. 元件如何呼叫頁面內的函式 #### 1.頁面如何向元件傳資料 ​ 最常用，最規範的方式，設定資料監聽器`observer`。 ​ 假設在頁面內引入了元件`sc` ~~~json "usingComponents": { "sc":"" } ~~~ ​ 想要配置一個監聽器用來監聽頁面中資料`list`的變化，元件在頁面中的寫法如下： ~~~html ~~~ 元件中的監聽器寫法如下，當頁面中的`list`值每次發生變化，都會觸發`observer`監聽器，打印出變化值。 ~~~js properties: { list:{ type:Array, observer: function (newVal, oldVal){ console.log(newVal) } } } ~~~ ​ 同理，除了動態傳值以外，這種方式也可以直接傳入靜態值，即不需要呼叫`obeserver`監聽器。在元件中可以直接使用`this.properties.*`來獲取`properties`中的各個值(*代表各個屬性值的名稱)。 #### 2.元件如何向頁面傳資料 ​ 既然元件可以設定監聽器用來監聽頁面資料變化，用來達到資料傳遞的效果，頁面同樣可以使用監聽器，來監聽元件觸發的資訊傳送。 仍然以上面的元件為例，如何向頁面中傳送資訊？ ​ 在頁面中配置元件監聽器 ~~~js ComponentListener(e){ let info = e.detail; } ~~~ ​ 元件選擇事件並繫結該監聽器 ~~~html ~~~ ​ 從元件中往頁面傳入輸入只需要在元件中觸發對應事件，`e.detail`就是傳過去的資料 ~~~js this.triggerEvent('listener',{func,tid}); ~~~ #### 3.頁面如何呼叫元件內的函式 ​ 假設我們引入並使用了一個元件`comment-bottom`，元件內有函式`handleCloseInput`，需要在某個邏輯中觸發。 想要使用元件內的函式，必須為元件配置一個唯一`id`，這樣就可以在頁面中通過`dom`操作選中元件並呼叫元件中的函式。 ~~~html ~~~ ​ 元件中的函式在頁面中的呼叫邏輯如下： ~~~js this.commentBottom = this.selectComponent("#commentBottom"); this.commentBottom.handleCloseInput(); ~~~ #### 4.元件如何呼叫頁面內的函式 ​ 上面向頁面傳資料的方式，實際上就是呼叫了頁面中的函式。我們可以這樣理解該邏輯，將該用法理解為一個函式對映。 ~~~html ~~~ ​ 當使用`trigger`觸發`componentfunc`時，通過`bind:`這個函式對映關係，就會觸發頁面中的`pagefunc`。 ​ 其次，呼叫頁面內的函式，還可以通過頁面棧的方式，元件並不佔用頁面的棧空間，因此在元件中使用`getCurrentPages`就可以獲得對應頁面的資料和方法。 ~~~js var allpages = getCurrentPages();//獲取全部頁面資料 var nowpage = allpages[allpages.length - 1].data;//獲取當前頁面的資料。 var nowpage = allpages[allpages.length - 1];//獲取頁面，包括資料和方法 ~~~ ​ 這部分內容出自我的一篇文章，我會把地址放在參考檔案中。 --- **結語：** 元件和元件之間的資料傳遞和元件與頁面之間並沒有太大區別，元件中也可以巢狀元件。 > **參考檔案** > > [微信小程式開發技巧總結 （一）-- 資料傳遞和儲存](https://www.cnblogs.com/masterchd/p/10901624.html)