如何使用微信小程序的自定义组件

 

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,然后根据该属性进行一些判断