微信小程序中组件的知识点汇总（lifetimes，externalClasses，observers，selectComponent，componentGenerics。。。）

1、组件也有它的生命周期（lifetimes）

自小程序基础版本2.2.3起，组件的生命周期可以在lifetimes字段中声明（这是推荐的方式，优先级最高）

  lifetimes: {
    created: function () {
      // 组件实例化，但节点树还未导入，因此这时不能用setData
    },
    attached: function () {
      // 在组件实例进入页面节点树时执行 
      // 节点树完成，可以用setData渲染节点，但无法操作节点
    },
    ready: function () {
      // 组件布局完成，这时可以获取节点信息，也可以操作节点
    },
    move: function () {
      // 组件实例被移动到树的另一个位置
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },

2、组件内使用父页面定义的样式（externalClasses）

组件js内先引用：

externalClasses: ['out_class'], // 引用父页面定义的class名

组件html中使用：

<view class="out_class">{{item.txt}}</view>

父页面中：

<nav nav="{{navData}}" out_class="txtColor"></nav>

.txtColor{
  color: purple;
}

3、组件中数据监听（observers）

3.1监听传过来数据

  properties: {
    testData: {
      type: String,
      observer: function(a, b){
        console.log('数据1：', b)
        console.log('数据2：', a)
      }
    }
  },

3.2监听data中的数据

  observers: {
    'oberser_data'(data){
      console.log('数据发生了变化', data)
    },
    'oberser_data.newVal'(data) { // 无用，监听不到
      console.log('第二个数据发生了变化', data)
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    oberser_data: '初始数据',
    oberser_data2: {
      'newVal': '深度数据'
    }
  },

   methods: {
    onNav(e) {
      this.setData({
          oberser_data: '改变的数据',
          ["oberser_data2.newVal"]: '第二个改变的数据'
      })
    }
  }

4、父子组件通信

父组件：<getCode  name=”{{name}}” bindmyEvent=”onTest”></getCode>
子组件在properties中接收name：properties：{name: {type:String,value:’’}}
然后子组件通过this.data.name就可以使用了

子组件中：click: function(e) {
var val = e.detail.value
    var myEventData = {val: val}
    this.triggerEvent(‘myEvent’,myEventData )
}
父组件中：onTest: function(e) {
    this.setData({value: e.detail.val})
}

5、获取组件实例对象

获取到了组件实例对象this.selectComponent(“#id)

调用组件实例中的方法this.selectComponent(“#id).fun()

6、抽象组件（具体可以看我另一篇文章，用抽象组件写瀑布流页面）

父页面：
<masonry generic:masonry-item="img-box" id="masonry" ></masonry>
this.masonryListComponent = this.selectComponent('#masonry');
    this.masonryListComponent.start(items).then(() => {
    console.log('refresh completed')
})

子组件：
“componentGenerics”: {
    “masonry-item”：true
}