微信小程序——頁面與組件，組件與組件，組件與模版間的數據傳遞

最近在微信小程序開發中使用到自定義組件Components

 

1  組件傳遞內容給頁面

給組件設置compclick事件，通過this.triggerEvent('compclick', data) 觸發該compclick事件並傳遞內容data，在頁面用onCompClick事件監聽傳遞過來的數據。 

組件wxml

<view class="comp-a" bindtap="onTap">
  <view>我是組件a</view>
</view>

組件js

Component({
  properties: {}，
  methods: {
    onTap(){
      let data= '我是 comp-a 組件'
      this.triggerEvent('compclick', data) // 觸發組件上的“compclick”事件
    } 
  }
})

調用的頁面wxml

<comp-a bindcompclick="onCompClick"></comp-a>

調用的頁面js

Page({
  // 監聽compclick事件
  onCompClick(e) {
    console.log('接收a組件傳遞的內容:', e.detail) // '我是 comp-a 組件'
  }
})  

 

2  組件與組件通信

兩個無任何關聯的組件：通過全局變量或本地緩存傳遞數據

兩個有關聯的組件(同一個父頁面下)： 通過上面的方法，用組件 => 頁面 => 組件的方式傳遞數據。

2.頁面之間的通信

2-1.使用全局變量 app.globalData

2-2.使用本地緩存 wx.setStorageSync

2-3.url傳遞

// A頁面-傳遞數據

// 需要注意的是，wx.switchTab 中的 url 不能傳參數。
wx.navigateTo({
  url:'/pages/pageB/pageB?name=raymond&gender=male'
})

// B頁面-接收數據
// 通過onLoad的option...
Page({
  onLoad(option){ 
    console.log(option.name +'is'+ option.gender)// raymond is male
    this.setData({option: option }) 
  }
})

2-2 後一級頁面對前一級頁面的數據的管理(通過獲取到頁面對象進行數據操作)

這個方法的精髓，是通過獲取到其他頁面的對象原型， 然後通過原型方法 setData 對當前對象管理的 data 進行修改 

示例如下：

//pageE.js

Page({
  data: {
    index:1
  }
})

當跳轉到下一個頁面 F 之後，假定在 F 中有操作需要對 E 中的數據有修改，則可以使用以下方法：

這個方法可以操作頁面堆棧裏面的頁面的數據， 可以做到讓後一級頁面對上級頁面羣的數據管理 。

// pageF.js

Page({ 
  changeIndexInE(){
    var pages = getCurrentPages();
    var prevPage = pages[pages.length -2];
    prevPage.setData({ 
      index:0
    })
  }
})

 

3，頁面與模板之間的通信

傳入模板的除了變量，還可以是事件方法對象。例如，模板中的點擊事件，可以傳遞到使用模板的元素中。

頁面

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

參考文檔：JoeWcc大神   https://www.jianshu.com/p/2ad63f6295fd