微信小程序 發現之旅（三）—— 組件之間的參數傳遞

 

1、URL 傳參

當使用 navigateTo() 方法跳轉頁面的時候，能夠在 url 後面接 query 參數

 

而後在 Page 頁面的生命週期函數 onLoad 中能夠接收到這些參數

 

此外 reLaunch 和 redirecTo 也支持 URL 傳參

 

 

2、事件處理

以前介紹的 properties 能夠從外部傳參到組件內部，若是須要向外部傳參，就須要用到組件事件

當自定義組件觸發事件時，在 methods 中添加處理函數，而後使用 triggerEvent 方法，指定事件名，建立自定義事件

而後在調用該組件的時候，添加這個自定義事件的處理函數

但目前只是完成了事件的連鎖，要想經過事件傳參還有不少工做要作

 

小程序的事件處理函數都沒法傳入自定義參數，只能接收固定參數 event

 可是能夠經過這樣的方式來建立額外參數 item：

而後在事件參數 event 中，event.currentTarget.dataset 來獲取對應的參數

 

 

上面提到的 triggerEvent 方法能夠包含三個參數，分別是事件名、detail 對象、事件選項

在獲取到 dataset 中的參數以後，能夠當作 detail 對象傳給父組件

由此完成了自定義組件對父組件的傳參

 

關於 triggerEvent 的第三個參數「事件選項」，能夠參考這個表格：

 

 

3、組件關係

當兩個自定義組件之間有着嵌套關係的時候，能夠在兩個組件以內定義 relations，從而直接訪問對方組件的實例

好比有這樣的兩個組件：

上面的 <w-list> 的經過 <slot> 渲染到了 <w-block> 組件中，造成嵌套關係

這時能夠在兩個組件內部定義 relations

// components/w-block/w-block.js
Component({
  relations: {
    '../w-list/w-list': { // 對方組件的相對路徑
      type: 'child', // 關聯的目標節點應爲子節點
      linked: function (target) {
        // 每次有custom-li被插入時執行，target是該節點實例對象，觸發在該節點attached生命週期以後
      },
      linkChanged: function (target) {
        // 每次有custom-li被移動後執行，target是該節點實例對象，觸發在該節點moved生命週期以後
      },
      unlinked: function (target) {
        // 每次有custom-li被移除時執行，target是該節點實例對象，觸發在該節點detached生命週期以後
      }
    }
  },
  data: {
    name: "I'm WiseWrong",
    title: "Welcome to my blog",
    address: "http://www.cnblogs.com/wisewrong/"
  }
})

上面是 <w-block> 中定義的 relations，同時還須要在 <w-list> 中定義，並將 type 設爲 parent

必須在兩個組件中都定義 relations，不然不會生效

 

在組件內部，能夠經過 this.getRelationNodes( 'path' ) 方法獲取到由對應的組件實例組成的數組

當關聯組件不止一個的時候，這個數組會包含全部的組件實例，並按照文檔流的順序排列

經過該方法，能夠直接獲取到關聯組件的 data、properties、dataset，但沒法獲取到 methods

而後能夠經過對應組件的 setData() 方法，修改組件實例的變量

PS：在小程序中，只有經過 setData 方法修改變量，才能即時更新前端頁面（單向綁定）