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

1.1组件的创建与引用

在components下新建文件夹，再新建component，会自动生成相应的四个文件

局部引用组件
在页面.json的配置文件中引用组件。

{
  "usingComponents": {
    "my-test":"/components/test/test"
  }
}

<my-test></my-test>

全局引用组件
在app.json中配置引用组件
用法同上

1.2自定义组件的样式

1.组件样式隔离的注意点
默认app.wxss中的全局样式对组件无效
只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响
建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！
2.可以通过styleIsolation修改组件样式的隔离选项
在组件.js的文件中:

Component({
  options:{
    styleIsolation:'isolated'
  }
})

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

1.3自定义组件传递参数

在小程序组件中，properties是组件的对外属性，用来接收外界传递到组件中的数据。

Component({
  properties: {
    count:{           //完整定义方式
      type:Number,  //属性值数据类型
      value:10      //属性默认值
    },
    count:Number      //简化定义方式
  },
})

<my-test count="10"></mt-test>

也可以用setData修改properties的值

1.4数据监听器

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

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

1.5 纯数据字段

纯数据字段指的是那些不用渲染的 data 字段。
应用场景：例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。

好处：纯数据字段有助于提升页面更新的性能。

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

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

1.6组件的生命周期

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

在小程序组件中，最重要的生命周期函数有3个，分别是created、attached、detached。它们各自的特点
如下：
① 组件实例刚被创建好的时候,created 生命周期函数会被触发
此时还不能调用setData
通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段
② 在组件完全初始化完毕、进入页面节点树后,attached 生命周期函数会被触发
此时，this.data 已被初始化完毕
这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）
③ 在组件离开页面节点树后，detached 生命周期函数会被触发
退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
此时适合做一些清理性质的工作

lifetimes节点：

Component({
  lifetimes:{
    created(){
      console.log('created');
    },
    attached(){
      console.log('attached');
    }
  }
})

1.7组件所在页面的生命周期

即自定义组件的行为依赖于页面状态的变化
在自定义组件中，组件所在页面的生命周期函数有如下3个：

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

1.8插槽

在自定义组件的 wxml 结构中，可<slot>节点（插槽），用于承载组件使用者提供的wxml结构

//组件
<view>
  <view>这里是组件的内部结构</view>
  <slot></slot>
</view>

//页面
<my-test1>
  <view>这是通过插槽填充ode内容</view>
</my-test1>

启用多个插槽：
在组件js中启用，在wxml中用不同name区分不同的slot

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

//页面
<my-test1>
  <view slot="before">AAA</view>
  <view slot="after">BBB</view>
</my-test1>

//组件
<view>
  <slot name="before"></slot>
  <view>这里是组件的内部结构</view>
  <slot name="after"></slot>
</view>

1.9父子组件之间的通信

完整案例
父子组件之间通信的3种方式
1.属性绑定
用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据

<my-test1 count="{{count}}"></my-test1>

子组件在properties中声明并接收

2.事件绑定
事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下：
① 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
② 在父组件的 wxml 中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件
③ 在子组件的 js 中，通过调用 this.triggerEvent(“自定义事件名称”, {/* 参数对象 */ ])，将数据发送到父组件
④ 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据

//父组件自定义事件
syncCount(e){
  this.setData({
    count:e.detail.value
  })
},

//父组件绑定事件
<my-test1 count="{{count}}" bind:sync="syncCount" class="customA"></my-test1>

//子组件触发事件
methods: {
  addCount(){
    this.setData({
      count: this.data.count + 1
    })
    this.triggerEvent('sync',{value:this.properties.count})
  }
}

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

  getChild(){
    const child = this.selectComponent('.customA')
    // console.log(child);
    // child.setData({
    //   count:child.properties.count + 1
    // })
    child.addCount()
  },

1.10 behaviors

behaviors 是小程序中，用于实现组件间代码共享的特性，类似于Vue.js中的“mixins"。

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。

每个组件可以引用多个behavior, behavior 也可以引用其他behavior。

// 调用 Behavior()方法，创建实例对象
// 并使用module.exports将behavior实例对象共享出去
module.exports = Behavior({
	// 属性节点
	properties：{},
	// 私有数据节点
	data：{ username: 'zs'},
	// 事件处理函数和自定义方法节点
	methods：{},
	// 其它节点..
})

behavior中所有可用的节点：
properties,data,methods,behaviors,created,attached,ready,moved,detached.

在组件中，使用 require()方法导入需要的behavior，
挂载后即可访问behavior中的的数据或方法

// 1．使用 require()导入需要的自定义benavior模块
const myBehavior = require("../../behaviors/my-behavior)
Component({
// 2．将导入的 behavior 实例对象，挂载到 behaviors 数组节点中，即可生效
behaviors: [myBehavior],
// 组件的其它节点...
})

同名字段的覆盖和组合规则
组件和它引用的 behavior 中可以包含同名的字段，对这些字段的处理方法如下：
如果有同名的属性 (properties) 或方法 (methods)：

1. 若组件本身有这个属性或方法，则组件的属性或方法会覆盖 behavior 中的同名属性或方法；
   若组件本身无这个属性或方法，则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法；
   在 2 的基础上，若存在嵌套引用 behavior 的情况，则规则为：父 behavior 覆盖 子 behavior 中的同名属性或方法。
   如果有同名的数据字段 (data)：

2. 若同名的数据字段都是对象类型，会进行对象合并；
   其余情况会进行数据覆盖，覆盖规则为：组件 > 父 behavior > 子 behavior 、 靠后的 behavior > 靠前的 behavior。（优先级高的覆盖优先级低的，最大的为优先级最高）
   生命周期函数不会相互覆盖，而是在对应触发时机被逐个调用：

3. 对于不同的生命周期函数之间，遵循组件生命周期函数的执行顺序；
   对于同种生命周期函数，遵循如下规则：
   behavior 优先于组件执行；
   子 behavior 优先于 父 behavior 执行；
   靠前的 behavior 优先于 靠后的 behavior 执行；
   如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数只会被执行一次。