微信小程序 頁面與自定義組件數據通信

先看官方文檔

組件間通信

組件間的基本通信方式有以下幾種。

• WXML 數據綁定：用於父組件向子組件的指定屬性設置數據，僅能設置 JSON 兼容數據（自基礎庫版本 2.0.9 開始，還可以在數據中包含函數）。具體在 組件模板和樣式 章節中介紹。
• 事件：用於子組件向父組件傳遞數據，可以傳遞任意數據。
• 如果以上兩種方式不足以滿足需要，父組件還可以通過 this.selectComponent 方法獲取子組件實例對象，這樣就可以直接訪問組件的任意數據和方法。

1. 頁面向自定義組件傳遞數據(類似vue的props)

看官方示例

<!-- 頁面的 json -->
{
  "usingComponents": {
    "my-component": "/components/custom-component"
  }
}

<!-- 頁面的 WXML -->
<my-component my-property="example" />
<my-component my-property="{{msg}}" />

<!-- 頁面的 js -->
const app = getApp()

Page({
  data: {
    msg:'hello wechar'
  },
  onLoad: function () {
   
  },
})



<!-- 組件 custom-component.wxml -->
<custom-component>
  <view>{{myProperty}}</view>
  <button bindtap='onMyButtonTap'>Button</button>
  <view>{{A[0].B}}</view>
  <button bindtap='_myPrivateMethod'>_myPrivateMethod</button>
</custom-component>


<!-- 組件 custom-component.json-->
Component({

  behaviors: [],

  properties: {
    myProperty: { // 屬性名
      type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
      value: '', // 屬性初始值（可選），如果未指定則會根據類型選擇一個
      observer: function (newVal, oldVal) { } // 屬性被改變時執行的函數（可選），也可以寫成在methods段中定義的方法名字符串, 如：'_propertyChange'
    },
    myProperty2: String // 簡化的定義方式
  },
  data: {
    A: [{
      B: 'init data.A[0].B'
    }]
  }, // 私有數據，可用於模版渲染

  lifetimes: {
    // 生命週期函數，可以爲函數，或一個在methods段中定義的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命週期函數，可以爲函數，或一個在methods段中定義的方法名
  attached: function () { }, // 此處attached的聲明會被lifetimes字段中的聲明覆蓋
  ready: function() { },

  pageLifetimes: {
    // 組件所在頁面的生命週期函數
    show: function () { },
  },

  methods: {
    onMyButtonTap: function () {
      this.setData({
        // 更新屬性和數據的方法與更新頁面數據的方法類似
         myProperty: 'Test',
        'A[0].B':'hello world' //改變數組和對象的屬性值有點不一樣
      })
    },
    _myPrivateMethod: function () {
      // 內部方法建議以下劃線開頭
      this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 這裏將 data.A[0].B 設爲 'myPrivateData'
      this.applyDataUpdates()
    },
    _propertyChange: function (newVal, oldVal) {

    }
  }

})

說明：頁面通過my-property講example字符串傳遞給自定義組件，同樣也可以使用數據綁定的方法

image.png

2.組件改變自身數據

代碼示例同上，在子組件中的methods中定義方法，通過this.setData({})改變

 methods: {
    onMyButtonTap: function () {
      this.setData({
        // 更新屬性和數據的方法與更新頁面數據的方法類似
        myProperty: 'Test'，
        'A[0].B':'hello world' //改變數組和對象的屬性值有點不一樣
      })
    },
}

3自定義組件改變頁面的數據（類似vue中的this.$emit()）

<!-- index.wxml-->
<text>{{msg}}</text>
<my-component my-property="{{txt}}" bindmyevent='change'/>

<!-- index.js-->
const app = getApp()

Page({
  data: {
    msg:'hello wechar',
    txt:'我們不一樣'
  },
  onLoad: function () {
   
  },
  change:function(e){
    console.log(e.detail);
    this.setData({
      msg:e.detail.val
    })
    
  }
})

<!-- 組件 custom-component.wxml -->
<custom-component>
  <view>{{myProperty}}</view>
  <button bindtap='onMyButtonTap'>Button</button>
  <view>{{A[0].B}}</view>
  <button bindtap='_myPrivateMethod'>_myPrivateMethod</button>
  <button bindtap='changeParentData'>向父組件傳值</button>
</custom-component>


<!-- 組件 custom-component.js -->
Component({
  behaviors: [],
  properties: {
    myProperty: { 
      type: String, 
      value: ''
    },
    myProperty2: String // 簡化的定義方式
  },
  data: {
  }, // 私有數據，可用於模版渲染
    ...
  methods: {
    ...
    changeParentData:function(){
      var myEventDetail = {
        val:'您好'
      } // detail對象，提供給事件監聽函數
      var myEventOption = {
        
      } // 觸發事件的選項
      this.triggerEvent('myevent', myEventDetail, myEventOption);
  
    //這樣通過事件將參數 傳遞給被監聽 函數 從而實現通信
    }
  }
})