Quartz

4 自定义组件

6分钟阅读

组件的创建

组件的引用

全局引用

// 在 app.json 文件中，引入组件
"pages": {/* 省略不必要的代码 */ },
"window": {/* 省略不必要的代码 */ },
"usingComponents": {
    "my-test2": "/components/test2/test2"
}
//在页面的.wxml文件中，使用组件
<my-test2></my-test2>

局部引用

// 在页面的·json 文件中，引入组件
"usingComponents": {
    "my-test1": "/components/test1/test1
}
//在页面的.Wxml文件中，使用组件
<my-test1></my-test1>

样式

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的 UI 结构

在组件和引用组件的页面中建议使用class 选择器

取消组件隔离

//在组件的·js 文件中新增如下配置
Component({
    options: {
        styleIsolation: 'isolated'
    }
})
//或在组件的·json文件中新增如下配置
{
    "styleIsolation": "isolated"
}

数据、方法和属性

用于组件模板渲染的私有数据定义在 data 节点，事件处理函数和自定义方法定义在 methods 节点，properties 是组件的对外属性，用来接收外界传递到组件中的数据

Component({
  data: {
    count: 0
  },
  methods: { // 组件的方法列表【包含事件处理函数和自定义方法】
    addCount() { //事件处理函数
      this.setData({
        count: this.data.count + 1
      })
      this._showCount()
    }, //通过 this 直接调用自定义方法
    _showCount() { //自定义方法建议以_开头
      wx.showToast({
        title: 'count值为：' + this.data.count,
        icon: 'none'
      })
    }
  },
  //属性定义
  properties: {
    max: { //完整定义属性的方式【当需要指定属性默认值时，，建议使用此方式】
      type: Number, //属性值的数据类型
      value: 10 //属性默认值
    },
    max: Number //简化定义属性的方式【不需指定属性默认值时，可以使用简化方式】
  }
})

数据监听器

监听和响应任何属性和数据字段的变化，从而执行特定的操作

<view>{{n1}} + {{n2}} = {{sum}}</view>
<button size="mini" bind:tap="addN1">addN1</button>
<button size="mini" bind:tap="addN2">addN2</button>
Component({
  data: {
    n1: 0, 
    n2: 0,
    sum: 0
  },
  methods: {
    addN1() {
      this.setData({
        n1: this.data.n1 + 1
      })
    },
    addN2() {
      this.setData({
        n2: this.data.n2 + 1
      })
    }
  },
  observers: {
    'n1, n2': function(n1, n2) {
      this.setData({
        sum: n1 + n2 
      })
    }
  }
})

案例：监听对象数据

<view style="background-color: rgb({{fullColor}});" class="colorBox">
颜色值：{{fullColor}}
</view>
<button size="mini" bind:tap="changeR" type="default">R</button>
<button size="mini" bind:tap="changeG" type="default">G</button>
<button size="mini" bind:tap="changeB" type="default">B</button>
Component({
  data: {
    rgb: {
      r: 0,
      g: 0,
      b: 0
    },
    fullColor: '0, 0, 0'
  },
  methods: {
    changeR() {
      this.setData({
        'rgb.r': this.data.rgb.r + 5 <= 255 ? this.data.rgb.r + 5 : 255
      })
      console.log(this.data.rgb.r)
    },
    changeG() {
      this.setData({
        'rgb.g': this.data.rgb.g + 5 <= 255 ? this.data.rgb.g + 5 : 255
      })
    },
    changeB() {
      this.setData({
        'rgb.b': this.data.rgb.b + 5 <= 255 ? this.data.rgb.b + 5 : 255
      })
    }
  },
  observers: {
    'rgb.r, rgb.g, rgb.b': function(r, g, b) {
      console.log("changeR")
      this.setData({
        fullColor: `${r}, ${g}, ${b}`
      })
    }
  }
})

纯数据字段

纯数据字段指的是那些不用于界面渲染的data 字段，有助于提升页面更新的性能

在Component 构造器的options 节点中，指定pureDataPattern为一个正则表达式，字段名符合这个正则 表达式的字段将成为纯数据字段

Component({
  options: {
    //指定所有_开头的数据字段为纯数据字段
    pureDataPattern: /^_/
  },
  data: {
    //将 rgb 改造为以 _ 开头的纯数据字段
    _rgb: {
      r: 0,
      g: 0,
      b: 0
    },
    fullcolor: '0, 0, 0'
  }
})

生命周期

组件的生命周期

生命周期函数参数描述说明
created无在组件实例刚刚被创建时执行
attached无在组件实例进入页面节点树时执行
ready无在组件在视图层布局完成后执行
moved无在组件实例被移动到节点树另一个位置时执行
detached无在组件实例被从页面节点树移除时执行
errorObject Error每当组件方法抛出错误时执行

lifetimes 节点：

生命周期函数可以直接定义在 Component 构造器的第一级参数中，可以在 lifetimes 字段内进行声明

组件所在页面的生命周期

生命周期函数参数描述
show无组件所在的页面被展示时执行
hide无组件所在的页面被隐藏时执行
resizeObject Size组件所在的页面尺寸变化时执行

定义在 pageLifetimes 中

插槽

父子组件之间的通信

属性绑定

用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据

事件绑定

用于子组件向父组件传递数据，可以传递任意数据

获取组件实例

父组件还可以通过 this.selectComponent() 获取子组件实例对象

这样就可以直接访问子组件的任意数据和方法

关系图谱