目录

• • • 组件
    • • 组件的引用方式
      • 样式隔离
      • • 自定义组件的样式隔离
        • 修改组件的样式隔离选项
      • 组件中的数据、属性、方法
      • properties
      • • data和properties的区别
        • 使用setData修改properties的值
      • 数据监听器
      • 纯数据字段
      • • 使用规则
      • 组件的生命周期函数
      • 组件所在页面的生命周期函数
    • 组件通信
    • • 插槽
    • 父子组件之间通信的3种方式
    • • behaviors

组件

组件的引用方式

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

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

样式隔离

自定义组件的样式隔离

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

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

修改组件的样式隔离选项

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

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

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

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

  "styleisolation":"isolated"

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

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

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

properties

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

  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、detached

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

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

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

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

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

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

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

  lifetimes:{created(){}}

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

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

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

  pageLifetimes:{show(){}}

组件通信

插槽

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

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

这是通过插槽填充的内容

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

  options:{multipleSlots:true},

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

这是通过插槽填充的内容1

这是通过插槽填充的内容2

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

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

{username}}">

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

username的值是：{{username}}

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

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

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

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

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

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

{username}}" bind:sync="syncUser">
{username}}" bindsync="syncUser">

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")。

{username}}" bind:sync="syncUser" class="zuzjian">
获取子组件的实例对象

    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]
})