微信小程序5，自定义组件，组件中的数据、属性、方法，组件的生命周期函数，组件通信

组件

组件的引用方式

• 局部引用：组件只能在当前倍引用的页面被使用
• 全局引用：组件可以在每个小程序页面中使用
  在页面的.json配置文件中引用组件的方式，叫做局部引用:

{
  "usingComponents": {
    "text1":"../components/text/text"
  }
}

<text1></text1>

样式隔离

自定义组件的样式隔离

• app.wxss的样式对组件是无效的
• 只有class选择器有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响

建议：在组件和引用组件的页面中建议使用class选择器，不要使用id选择器、属性选择器、标签选择器

修改组件的样式隔离选项

有时候是需要外界能够控制组件内部的样式，此时可以修改stylelsolation修改组件的样式隔离选项。

• 在组件的js文件中配置如下信息

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

• 在组件的.json中新增如下配置

  "styleisolation":"isolated"

默认是isolated，可选值有以下：

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

组件中的数据、属性、方法

• 数据都写在自定义组件的data的节点里
• 方法都写在自定义组件的methods节点里，如果不是事件处理函数建议用_开头
• 属性

properties

是组件的对外属性，用来接收外界传递到组件中的数据，在方法中使用时是this.properties.max

<text1 max="10"></text1>

  properties:{
    max:{                   //完整定义属性的方式【需要指定属性默认值时使用】
      type:Number,          //默认值数据类型
      value:10
    },
    max:Number               //简化定义属性的方式【不需要定义默认值时使用】
  }

data和properties的区别

在小程序的组件中，properties属性和data数据的用法相同，他们都是可读可写的，区别是：

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

使用setData修改properties的值

由于data数据和properties属性在本质上没有任何区别，因此properties属性的值也可以用于页面渲染，或使用setData为properties中的属性重新赋值

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

数据监听器

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

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

  data:{
    n1:1,
    n2:2,
    all:0
  },
  methods:{
    changeMax(){
      this.setData({
        max:this.properties.max+1,
        n1:this.data.n1+1,
        n2:this.data.n2+1,
      })
    }
  },
  observers:{
    'n1,n2':function(newn1,newn2){
      this.setData({
        all:newn1+newn2
      })
    }
  }

监听对象属性的变化：

  observers:{
    '对象.属性A,对象.属性B':function(对象.属性A的新值,对象.属性A的新值){
      //触发此监听的三种情况：
      //为属性A赋值，使用setData设置this.data.对象.属性A时触发
      //为属性B赋值，使用setData设置this.data.对象.属性B时触发
      //为对象赋值，使用setData设置this.data.对象时触发
      // do something
    }
  }

  data:{
    jianting:{
      a:1,
      b:1,
      sun:0
    },
  },
  methods:{
    changeA(){
      this.setData({
        'jianting.a':this.data.jianting.a+1
      })
    },
    changeB(){
      this.setData({
        'jianting.b':this.data.jianting.b+1
      })
    }
  },
    observers:{
    'jianting.a,jianting.b':function(a,b){
      this.setData({
        'jianting.sun':a+b
      })
    }
  }

纯数据字段

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

使用规则

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

// 指定所有以_开头的数据为纯数据字段
  options:{
    pureDataPattern:/^_/
  },
    data:{
    _b:1 //纯数据字段
  },

组件的生命周期函数

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

组件主要的生命周期函数主要有created、attached、detached

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

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

• attached：在组件完全初始化完毕、进入页面节点树后触发

  • 此时this.data已经初始化完毕
  • 绝大多数初始化的工作可以在时候进行，例如发请求初始数据

• detached在组件离开节点树后触发

  • 退出一个页面时，会触发页面内每个自定义组件该函数
  • 此时适合做一些清理性质的工作

生命周期函数定义在lifetimes字段中

  lifetimes:{
    created(){}
  }

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

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

• show 组件所在的页面被展示时执行
• hide 组件所在的页面被隐藏时执行
• resize 组件所在的页面尺寸变化时执行
  组件中如果需要监听所在页面的生命周期函数，需要定义在**pageLifetimes**节点中

  pageLifetimes:{
    show(){}
  }

组件通信

插槽

在自定义组件的wxml结构中，可以提供一个<slot>节点（插槽），用于承载组件使用者提供的wxml结构。
<slot></slot>作为组件的封装者在封装组件时，通过<slot>提供的内容的占位符。

• 单个插槽，默认自定义组件中只允许使用一个<slot>进行占位，这种个数上的限制叫做单个插槽。

<!-- 组件内部 -->
<!-- 组件的封装者 -->
<slot></slot>

<!-- 组件被使用时所在的页面 -->
<!-- 组件的使用者 -->
<text1>
<view>
  这是通过插槽填充的内容
</view>
</text1>

• 启用多个插槽，在组件的.js文件中配置如下内容：

  options:{
    multipleSlots:true
  },

• 定义多个插槽，可以在组件的.wxml中使用多个<slot>标签，以不同的name来区分不同的插槽。
• 使用多个插槽，需要用slot属性来将节点插入到不同的<slot>属性中。

<!-- 组件内部 -->
<!-- 组件的封装者 -->
<slot name="a1"></slot>
<slot name="b1"></slot>

<!-- 组件被使用时所在的页面 -->
<!-- 组件的使用者 -->
<text1>
<view slot="a1">
  这是通过插槽填充的内容1
</view>
<view slot="b1">
  这是通过插槽填充的内容2
</view>
</text1>

父子组件之间通信的3种方式

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

<!-- 父组件 -->
<text2 username="{{username}}"></text2>

  // 组件内部.js文件进行接收
  properties:{
    username:String
  },

<!-- 子组件 -->
<view>
  username的值是：{{username}}
</view>

在子组件中可以对接收的父组件的值进行修改

  methods: {
    changeUser(){
      this.setData({
        username:this.properties.username + 1
      })
    }
  }

• 事件绑定，用于子组件向父组件传递数据，可以传递任意属性

  1‘在父组件的js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

    syncUser(){
      console.log("传递username")
    }

2’ 在父组件的wxml中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件

<!-- 父组件中两种形式 -->
<text2 username="{{username}}" bind:sync="syncUser"></text2>
<text2 username="{{username}}" bindsync="syncUser"></text2>

3‘在子组件的js中，通过调用this.triggerEvent('自定义事件名称',{/**参数对象/})，将数据发送到父组件

    changeUser(){
      this.setData({
        username:this.properties.username + 1
      })
      this.triggerEvent('sync',{value:this.properties.username})
    }

4’ 在父组件的js中，通过e.detail获取到子组件传递过来的数据

    syncUser(e){
      console.log("传递username")
      this.setData({
        username:e.detail.value
      })
    }

• 获取组件实例，父组件可以通过this.selectComponent()获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法。可在父组件里调用this.selectComponent("id或class选择器")，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器，例如this.selectComponent(".my-commonent")。

<text2 username="{{username}}" bind:sync="syncUser" class="zuzjian"></text2>
<button bindtap="getUser">获取子组件的实例对象</button>

    getUser(){
      const zizujian = this.selectComponent('.zuzjian')
      zizujian.setData({
        count:zizujian.data.count + 1
      })
      zizujian.changeUser()
    }

behaviors

behaviors是小程序中，用于实现组件间代码共享的特性，类似于Vue.js中的“mixins”。每个 behaviors可以包含一组属性、数据、生命周期函数和方法。组件引用它是，它的属性和方法会被合并到组件中。每个组件可以引用多个 behavior， behavior也可以引用其他 behavior

• 创建 behavior，调用 Behaviors()方法即可创建一个共享的 behavior实例对象，供所有的组件使用
  在项目根目录中创建文件夹 behaviors。

module.exports = Behavior({
  data:{
    username:"lw"
  },
  properties:{},
  methods:{},
  behavior:{}
})

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

const myBehavior = require('../../behaviors/behavior1')
Component({
behavior:[myBehavior]
})