微信小程序自定义组件总结

学习的目标

1. 初始并创建自定义组件
2. 自定义组件的样式
3. 组建的method和data和properities
4. 自定义数据的监听器
5. 自定义组件的纯数据字段
6. 自定义组件的生命周期函数
7. 组件所在页面的生命周期函数
8. 自定义组件的插槽
9. 三种组件通信
10. 自定义组件的behaviors

数据监听器案例

app.josn声明
"usingComponents": {
    "my-test1":"/components/test/test",
    "my-test3":"/components/test3/test3"
  }

<text>components/test2/test2.wxml</text>
<view>
{{n1}}+{{n2}}={{sum}}
</view>
<button bindtap="addN1">n1+1</button>
<button bindtap="addN2"> n2+1</button>

data: {
    n1:10,
    n2:0,
    sum:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    addN1(){this.setData({n1:this.data.n1 + 1})},
    addN2(){this.setData({n2:this.data.n1 + 1})},

  },
  observers:{
    'n1,n2':function(newN1,newN2){//监听n1 n2数据变化
      this.setData({sum:newN1+newN2}) //通过监听器，自动计算sum
    }
  }

纯数据字段就是那些不用于界面渲染的data字段，仅仅在当前页面使用

第一步
Component({
  options:{
    pureDataPattern:/^_/
  },
 })

第二步

  data: {
    _rgb:{改为下划线
    r:0,
    g:0,
    b:0
    },
    fullColor:'0 ,0, 0'
  },

lifetimes节点
简单

pageLifetimes:{
    show(){
      console.log('show')//页面展示
    },
    hide(){
      console.log('show')//页面隐藏
    },
    resize(){
      console.log('resize')//页面尺寸变化
    }
  }

slot,用于承载组件

多个插槽 
单个view  slot标签
Component({
  options:{
    multipleSlots:true
  }

父子组件之间的通信
属性绑定
事件绑定：用于实现子向父传值
this.selectComponent
behaviors
用于实现组件代码共享 类似于mixins
包含：属性 数据 生命周期函数 方法

module.exports = Behavior({
  data:{
    username:'zs'
  },
  properties:{

  },
  methods:{}
})

同名字段的覆盖
组件>父behavior>子behavior>靠后的>靠前的