如何使用微信小程序的自定義組件

 


Component({

  behaviors: [],

  // 屬性定義(詳情參見下文)
  properties: {
    myProperty: { // 屬性名
      type: String,
      value: ''
    },
    myProperty2: String // 簡化的定義方式
  },

  data: {}, // 私有數據,可用於模板渲染  
lifetimes: {
    // 生命週期函數,可以爲函數,或一個在methods段中定義的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

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

  pageLifetimes: {
    // 組件所在頁面的生命週期函數
    show: function () { },
    hide: function () { },
    resize: function () { },
  },methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新屬性和數據的方法與更新頁面數據的方法類似
      })
    },
    // 內部方法建議以下劃線開頭
    _myPrivateMethod: function(){
      // 這裏將 data.A[0].B 設爲 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})

properties和data中的屬性值都可以用來在頁面使用{{  }}來綁定 ,但是在properties,可以在使用組件的父頁面傳值進去

options: {

multipleSlots: true // 在組件定義時的選項中啓用多slot支持

},

externalClasses: ['custom-class', 'my-refresh-view'],

組件外部傳遞樣式進去,覆蓋原有的默認樣式

methods中的方法爲響應當前組件中的方法

// 內部方法建議以下劃線開頭
    _myPrivateMethod: function(){
      // 這裏將 data.A[0].B 設爲 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
observer: function(newVal, oldVal) {
        // 屬性值變化時執行
      }

爲屬性中的值變化的時候的監聽函數,類似於vue中的watch ,記住一定不能在當前屬性的observer中去setData,會造成死循環的。

在組件內部可以直接使用this.properties.myproperty,然後根據該屬性進行一些判斷

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章