【小程序基础】自定义组件

什么是自定义组件

在实际开发中，为了实现代码复用和维护，我们通常会使用自定义组件
官方文档：自定义组件 | 微信开放文档 (qq.com)

自定义组件的属性

新建了自定义属性之后，组件的js代码是Component包裹的对象，有一下属性

• lifetimes 组件生命周期
  • created 在组件实例刚刚被创建时执行
  • attached 在组件实例进入页面节点树时执行
  • ready 在组件在视图层布局完成后执行
  • detached 在组件实例被从页面节点树移除时执行
  • moved 在组件实例被移动到节点树另一个位置时执行
  • error 每当组件方法抛出错误时执行
• pageLifetimes 组件所在页面的生命周期
  • show 页面被展示
  • hide 页面被隐藏
  • resize 页面尺寸变化
• properties 组件的属性列表
• data 组件的初始数据
• methods 组件的方法列表
• observers 组件数据字段监听器，用于监听 properties 和 data 的变化
• behaviors 类似于 mixins 和traits的组件间代码复用机制

observers

Component({
  observers: {
    'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时，执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    },
    'some.subfield': function(subfield) {
      // 使用 setData 设置 this.data.some.subfield 时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      subfield === this.data.some.subfield
    },
    'arr[12]': function(arr12) {
      // 使用 setData 设置 this.data.arr[12] 时触发
      // （除此以外，使用 setData 设置 this.data.arr 也会触发）
      arr12 === this.data.arr[12]
    },
    'some.field.**': function(field) {
      // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      field === this.data.some.field
    },
    '**': function() {
      // 每次 setData 都触发
    },
  }
  
})

纯数据字段

指定“纯数据字段”的方法是在 Component 构造器的 options 定义段中指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段。

Component({
  options: {
    pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
  },
  properties: {
    _f: {
      type: Boolean,
      observer() {
        // 不要这样做！这个 observer 永远不会被触发
      }
    },
  }
  
  data: {
    a: true, // 普通数据字段
    _b: true, // 纯数据字段
  },
  methods: {
    myMethod() {
      this.data._b // 纯数据字段可以在 this.data 中获取
      this.setData({
        c: true, // 普通数据字段
        _d: true, // 纯数据字段
      })
    }
  }
})

json配置文件

{
  "pureDataPattern": "^_"
}

Behavior

• properties
• data
• methods
• behaviors
• 生命周期
  • created
  • attached
  • ready
  • moved
  • detached

Behavior({
  behaviors: [],
  properties: {
    myBehaviorProperty: {
      type: String
    }
  },
  data: {
    myBehaviorData: {}
  },
  attached: function(){},
  methods: {
    myBehaviorMethod: function(){}
  }
})

组件间通信

• 子组件 -> 父组件

    this.triggerEvent('myevent', myEventDetail, myEventOption)
  

• 父组件获子组件实例

    // 父组件调用
    const child = this.selectComponent('#the-id') // 等于 { myField: 'myValue' }
  

样式

• 默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的
• app.wxss 中的全局样式对组件无效
• 只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响