创建组件

1.新建组件所在的文件夾

2.在对应的文件夹中创建组件

组件引用

组件引用分为局部引用和全局引用

局部引用：组件只能在当前被引用的页面引用
全局引用：组件可以在每个小程序页面引用

局部引用在当前页面json中配置usingComponents，全局引用在app.json文件中配置usingComponents

{
  "usingComponents": {
    "my-test":"/components/test/test"
  },
  "enablePullDownRefresh": true
}

<my-test></my-test>

组件在多个页面中经常被用到，建议“全局引用”
组件只在特定页面中被用到，建议“局部引用”

组件与页面的区别

组件和页面的.js与.json文件有明显不同

组件的.json文件中需要声明"component": true属性
组件的.js文件中调用的是Component()函数
组件的事件处理函数需要定义到methods节点中

组件样式隔离

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

组件A的样式不会影响组件B
组件A的样式不会影响小程序页面样式
小程序页面样式不会影响组件A和C的样式

好处：

防止外部样式影响组件内部样式
防止组件样式破坏外部样式

组件样式隔离注意点

app.wxss中全局样式对组件无效
只有class选择器会有样式隔离的效果，id选择器、属性选择器、标签选择器不受样式隔离的影响建议：组件和引用组件的页面中建议使用class选择器，不要使用id选择器、属性、标签选择器!

修改组件隔离样式

默认情况下，自定义组件的样式隔离特性能够防止组件外样式干扰问题。但有时希望外界能控制组件内部的样式，此时，可以通过stylelsolation修改组件样式隔离选项，用法如下：

在页面json文件中配置

isolated：启用样式隔离，默认配置
apply-shared：页面可以影响组件样式，组件不会影响页面样式
shared：页面的样式会影响组件样式，组件样式也会影响页面样式或其他设置了apply-shared或shared组件的样式

// isolated  启用样式隔离 
{
  "styleIsolation": "isolated",
}

或在页面js文件中配置

Component({
  options:{
    styleIsolation:"isolated"
  },
})

data和methods

Component({
  /**
   * 组件的初始数据
   */
  data: {
   count:0,
  },
  /**
   * 组件的方法列表
   */
  methods: {
    addCount(){
      this.setData({
        count:this.data.count+1
      })
      this._showCount();
    },
    _showCount(){
      wx.showToast({
        title: 'count：'+this.data.count,
      })
    }
  }
})

<button bind:tap="addCount">add</button>

properties属性（组件通信）

properties是组件对外属性，用来接收外界传递组件中的数据，示例代码如下：

  properties: {
  // 完全定义属性方式，需要指定默认值时使用
   max:{
     type:Number,
     value:0,
   },
   // 简化定义属性方式，不需要指定默认值时使用
   min:Number
  },

<my-test max="10"></my-test>

data与properties区别

小程序中，data与properties都是可读可写的，只不过：

data更倾向于存储组件的私有数据
properties更倾向于存储外界传递到组件中的数据

  properties: {
   max:{
     type:Number,
     value:0,
   },
   min:Number
  },
  data: {
   count:0,
  },

console.log(this.data) // 输出结果 {count: 0, max: 10, min: 0}
console.log(this.properties) // 输出结果{count: 0, max: 10, min: 0}
// 结果为true 即data与properties本质上是一样的，都是可读可写的
console.log(this.data===this.properties)

修改properties值

this.setData({max:this.properties.max+1})

数据监听

数据监听用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。类似于vue中的watch监听，在小程序中，语法如下：

Component({
  observers:{
    "字段A,字段B":function(字段A的新值,字段B的新值){

    }
  }
})

监听对象属性

监听单个或多个属性变化

Component({
  observers:{
    "对象.属性A,对象.属性B":function(属性A的新值,属性B的新值){
   
    }
})

使用通配符**监听所有属性的变化，如：

Component({
  observers:{
    "对象.**":function(obj){
   
    }
})

纯数据字段

纯数据字段是指那些即不用于界面渲染、也不会传递给其他组件的data字段，仅仅在当前组件的内部使用。有助于提升页面更新的性能。

使用规则

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

Component({
  options:{
    // 指定所有_开头的数据字段为纯数据字段
    pureDataPattern:/^_/
  },
  data: {
    a:true, // 普通数据字段
    _a:true, // 纯数据字段
  },
})

组件生命周期

生命周期	参数	描述	最低版本
`created`	无	在组件实例刚刚被创建时执行`【组件被创建好，但还没有被放入页面中】`	1.6.3
`attached`	无	在组件实例进入页面节点树时执行`【组件刚被放入页面中，但还没有渲染】`	1.6.3
ready	无	在组件在视图层布局完成后执行	1.6.3
moved	无	在组件实例被移动到节点树另一个位置时执行	1.6.3
`detached`	无	在组件实例被从页面节点树移除时执行	1.6.3
error	`Object Error`	每当组件方法抛出错误时执行	2.4.1

组件主要生命周期函数

主要有三个生命周期函数，created，attached，detached：

created：组件实例刚被创建好时触发

此时不能使用setData
通常在这个生命周期函数中，只应该用于给组件的this添加一些自定义属性字段

attached：组件完全初始化完毕后，进入页面节点数

this.data初始化完毕
大多数初始化工作可以在这个时候进行

detached：组件离开页面节点树后触发

退出页面时触发
适合做一些清理性质的工作

liftTime节点

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

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

组件所在页面的生命周期

自定义组件的行为依赖于页面的变化，此时就用到组件所在页面生命周期。

生命周期	参数	描述	最低版本
show	无	组件所在的页面被展示时执行	2.2.3
hide	无	组件所在的页面被隐藏时执行	2.2.3
resize	`Object Size`	组件所在的页面尺寸变化时执行	2.4.0
routeDone	无	组件所在页面路由动画完成时执行	2.31.2

组件所在的页面生命周期函数，需要定义在pageLifetimes节点中，如：

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

插槽

自定义组件wxml结构中，可以提供一个节点（插槽），用于承载组件使用者提供的wxml结构。

单个插槽

默认每个自定义组件只允许使用一个占位，这种个数上的限制叫做单个插槽

<view>
  <view>插槽内容</view>
  <slot></slot>
</view>

启用多个插槽

在小程序中，需使用多个插槽时，可以在组件的.js文件中，通过如下配置使用：

Component({
  options:{
    multipleSlots:true
  },
})

定义多个插槽可以在.wxml中使用多个标签，以不同的name区分不同的插槽。如：

<my-test max="10">
  <view slot="before">before</view>
  <view slot="after">after</view>
</my-test>

my-test

<view>
  <slot name="before"></slot>
  <slot name="after"></slot>
</view>

初识小程序-自定义组件