自定义组件（微信小程序）

创建组件

引用组件

1. 局部引用 (在页面的.json配置文件中引用组件的方式)
2. 全部引用 (在app.json全局配置文件中引用组件的方式)

// .json
{
  "usingComponents": {
    "tabar":"/components/tabar/tabar"
  }
}
// wxml
<tabar></tabar>

组件和页面的区别

• 从表面上看，组件和页面都是由.js、.json、.wxml、和.wxml这4个文件组成。但是，组件和页面的.js与.json文件有明显的不同：

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

自定义组件的样式

1. 组件样式隔离

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

2. 组件样式隔离的注意点

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

3. 修改组件的样式隔离选项

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

// 在组件的.js 
component({
    options:{
        stylelsolation: 'isolated'
    }
})
// 或在组件的.json 
{
    "stylelsolation":"isolated"
}

• stylelsolation的属性值

属性值	默认值	描述
isolated	是	表示启用样式隔离，在自定义组件内外，使用class指定的样式将不会相互影响
apply-shared	否	表示页面wxss样式将影响到自定义组件，但自定义组件wxss中指定的样式不会影响到页面
shared	否	表示页面wxss样式将影响到自定义组件，自定义组件wxss中指定的样式也会影响到页面和其他设置了apply-shared或shared的自定义组件

properties、data、methods（组件.js）

Component({
  /** 
  *组件的属性列表 
  *用来接收外界传递到组件中的数据(可读可写的)
  *可以使用this.setData()来设置properties的值，properties的值改变只是在组件内部生效，不会影响页面传递过来的值
  * 更倾向于存储外界传递到组件中的数据
  **/
  properties: {
    // 完整定义属性的方式【当需要指定属性默认值时，建议使用】
    max:{
      type:Number,
      value:10
    },
    // 简化定义属性的方式【不需要指定属性默认值时，建议使用】
    max:Number
  },
  /** 
  *组件的初始数据(可读可写的)
  * 更倾向于存储组件的私有数据
  **/
  data: {},
  // 组件的方法列表
  methods: {}
})

数据监听器

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

1. 基本语法

Component({
    observers:{
        '字段A,字段B':function(字段A的新值,字段B的新值) { 
            // do something
        }
    }
})

2. 监听对象属性的变化（支持监听对象中单个或多个属性的变化）

 Component({
    observers:{
        '对象.属性A,对象.属性B':function(属性A的新值,属性B的新值) { 
            // 触发此监听器的3中情况
            // 1.【为属性A赋值】使用setData设置 this.data.对象.属性A 时触发
            // 2.【为属性B赋值】使用setData设置 this.data.对象.属性B 时触发
            // 3.【直接为对象赋值】使用setData设置 this.data.对象 时触发
            // do something
        }
    }
})   

3. 监听对象中所有属性的变化

Component({
    observers:{
        '对象.**':function(obj) { 
            // do something
        }
    }
})

纯数据字段

1. 应用场景

• 某些data中的字段既不会展示在界面上，也变化传递给其他组件，仅仅在当前组件内部使用。带有这种特性的data字段适合被设置为纯数据字段

2. 使用规则

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

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

组件生命周期函数

自定义组件自身的生命周期函数(推荐在lifetimes节点里面使用)

Component({
  // 自定义组件自身的声明周期函数
  // 除了在lifetimes节点写生命周期函数，还可以在Component构造器的第一级节点中写
  // lifetimes节点里面写生命周期函数时推荐的方式，其优先级最高
  lifetimes:{
    created(){
      // * 组件实现 刚被创建好 的时候触发
      // 此时还不能调用setData
      // 在这里通常只应该用于给组件的this添加一些自定义的属性字段
    },
    attached(){
      // * 在组件 完全初始化完毕、进入页面节点树后 ，触发
      // 此时，this.setData已被初始化完毕
      // 绝大多数初始化工作可以在这个时机进行（例如发送请求获取初始数据） 
    },
    ready(){
      // 在组件在视图层布局完成后执行
    },
    moved(){
      // 在组件实例被移动到节点树另一个位置时执行
    },
    detached(){
      // * 在组件 离开页面节点书后 ， 触发
      // 退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数
      // 此时合适做一些清理性质的工作
    },
    error(err){
      // 每当组件方法抛出错误时执行，参数为Object Error
    }
 }
})

自定义组件所在页面的生命周期函数

Component({
  // 有时候自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期
  // 定义在pageLifetimes节点中
  pageLifetimes:{
    show:function(){
      // 组件所在页面被展示时执行
    },
    hide:function(){
      // 组件所在页面被隐藏时执行
    },
    resize:function(size){
      // 组件所在页面尺寸变化时执行 参数为Object Size
    }
  }
})

组件插槽slot

单个插槽

1. 组件

<view>
  <view>组件内容</view>
  <view>下面是插槽内容</view>
  <slot></slot>
</view>

2. 在页面上使用组件

<view>
  <view>组件所在页面</view>
  <tabar >
    <view>插槽内容</view>
  </tabar>
</view>

多个插槽

1. 组件.js

Component({
  options:{
    multipleSlots:true//在组件定义时的选项中启用多 slot支持
  }
})

2. 组件wxml

<view>
  <view>组件内容</view>
  <view>下面是插槽before内容</view>
  <slot name="before"></slot>
  <view>下面是插槽after内容</view>
  <slot name="after"></slot>
</view>

3. 在页面上使用组件

<view>
  <view>组件所在页面</view>
  <tabar >
    <view slot="after">after插槽内容</view>
    <view slot="before">before插槽内容</view>
  </tabar>
</view>

父子组件之间的通信

属性绑定

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

1. 子组件

<!-- 子组件.wxml -->
<view>
  <view>子组件</view>
  <view>父组件传递的值：{{num}}</view>
</view>

// 子组件.js
Component({
  properties:{
    num:Number
  }
})

2. 父组件

<!-- 父组件.wxml -->
<view>
  <view>组件所在页面要传递给子组件的值：{{a}}</view>
  <tabar num="{{a}}"></tabar>
</view>

// 父组件.js
Page({
  data: {
    a:1
  }
})

事件绑定

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

1. 父组件(绑定和接收)

<!-- 父组件.wxml -->
<view>
  <view>组件所在页面</view>
  <!-- 自定义事件 -->
  <!-- bind:syncA="syncAFn" -->
  <!-- bindsyncA="syncAFn" -->
  <tabar num="{{a}}" bind:syncA="syncAFn"></tabar>
</view>

// 父组件.js 
Page({
  syncAFn(e){
    console.log('自定义事件返回参数',e.detail)
  }
})

2. 子组件(触发)

// 子组件.js 
Component({
  methods:{
    add(){
      //  this.triggerEvent('自定义事件名称','传递参数')
      this.triggerEvent('syncA',1)
    },
  }
})

获取组件实例

• 父组件还可以通过this.selectComponent('id或class选择器')获取子组件实例对象
• 这样就可以直接访问子组件的任意数据和方法
• 用法

1. 子组件

<view>
  <view>子组件{{num}}</view>
</view>

Component({
  // 子组件的数据
  data: {
    num: 1
  },
  methods: {
    // 子组件的方法
    add() {
      this.setData({
        num: this.data.num + 1
      })
    },
  }
})

2. 父组件

<view>
  <view>组件所在页面</view>
  <tabar class="tabar_"></tabar>
  <button bindtap="setBar">+1</button>
</view>

Page({
  setBar() {
    // 获取子组件
    const tabrDom = this.selectComponent('.tabar_')
    //  调用子组件的方法
    tabrDom.add()
    //  打印子组件的数据
    console.log(tabrDom.data.num)
  }
})