组件

创建组件

根目录下新建components目录，右键目录，新建component，工具会自动创建组件文件。

局部引用组件

// 页面.json文件中引入组件
{
  ""
}

// .wxml文件中使用组件
<my-component></my-component>

全局引用

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

// .wxml中
<my-component></my-component>

组件和页面的区别

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

Component({
  // 组件的属性列表
  properties: {},
  // 组件的初始数据
  data: {},
  // 组件的方法列表
  methods: {
    // 组件内的自定义方法推荐以下划线开头
    // 推荐在事件方法中调用
    _showInfo(){}
  }
})

样式隔离

• 组件A的样式不会影响组件B的样式，也不会影响小程序页面的样式
• 小程序页面的样式不会影响组件A和B的样式
• app.wxss中的全局样式对组件无效
• 只有class选择器会有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响

修改样式隔离

通过修改styleIsolation来改变组件的影响。可选值如下：

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

Component({
  options: {
    styleIsolation: 'apply-shared'
  }
})

properties

组件自定义属性，用于接收外界传递到组件中的数据

Component({
  properties: {
    count: {          // 完整定义
      type: Number,   // 类型
      value: 10       // 默认值
    },

    // 简化定义
    // count: Number
  }
})

// .wxml
<my-component count="10"></my-component>

data和properties的区别

二者都可读可写，data更倾向于存储组件的私有数据，properties更倾向于存储外界传递到组件中的数据

数据监听

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

Component({
  data: {n1:0,n2:0,sum:0,user:{name: 'tom', age:18}}, // 数据节点
  methods: {
    addN1(){this.setData({n1:this.data.n1+1})},
    addN2(){this.setData({n2:this.data.n2+1})}
  },
  observers: {
    'n1, n2': function(n1, n2){
      this.setData({sum:n1+n2}) // 自动计算sum的值
    },
    'user.name': function('tony'){
      // 触发监听
    }
  }
})

纯数据字段

概念：不用于渲染在界面上的data字段。

既不展示在界面上，也不传递给其他组件的字段，适合作为纯数据字段。

定义纯数据字段需要先设定规则

Component({
  options: {
    pureDataPattern: /^_/
  },
  data: {
    a: true,
    _b: true,   // 符合下划线开头的规则，纯数据字段
  }
})

组件的生命周期函数

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行。此时组件刚创建好，还不能调用setData。通常在此处给组件的this添加一些自定义的属性字段
attached	无	在组件实例进入页面节点树时执行。还未渲染出来。this.data已初始化完毕。可在此发送请求
ready	无	在组件视图层布局完成后执行
moved	无	组件实例被移动到节点树另一个位置时执行
detached	无	组件实例从页面节点树移除时执行。在此做清理性质的工作为宜。
error	Object Error	组件方法抛出错误时执行

Component({
  // 新用法
  lifetimes: {
    attached(){},
    detached(){},
  },

  // 旧用法
  // attached(){},
  // detached(){},
})

组件所在页面的生命周期

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

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

Component({
  // 新用法
  pageLifetimes: {
    show: function(){},
    hide: function(){},
    resize: function(){},
  },

  // 旧用法
  // attached(){},
  // detached(){},
})

插槽

承载组件使用者提供的wxml结构。

没有name也可以用。<slot></slot>

// component.wxml
<view>
  <slot name="slot1"></slot>
  <view>=============</view>
  <slot name="slot2"></slot>
</view>

// index.wxml
<view class="container">
  <my-component>
    <text slot="slot1">1 components/my-component.wxml</text>
    <text slot="slot2">2 components/my-component.wxml</text>
  </my-component>
</view>

配置选项才能启用多个插槽。

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

父子组件通信

1. 属性绑定

父组件向子组件指定属性设置数据。仅能设置JSON兼容的数据。

2. 事件绑定

子组件向父组件传递数据，可以传递任意数据。

// fathercomponent
// bind:自定义事件名称, 这种形式可以向子组件传参
<my-component count="{{count}}" bind:sync="syncCount" ></my-component>

// 父组件js中
  syncCount(e){
    console.log(e.detail.value);
  }


// childcomponent
methods: {
  addNum(){
    this.triggerEvent('sync', {value: this.properties.count})
  }
}

3. 获取组件实例

父组件通过this.selectComponent()获取子组件实例对象，可以直接访问子组件的任意数据和方法

// wxml
<childcomponent class="child" id="child01"></childcomponent>

getChild(){
  const child = this.selectComponent('.child'); // 也可以传递id选择器 #child01
  child.setData({})
  child.addCount()
}

Behavior

根目录下创建behaviors目录，创建.js文件，写入调用Behavior()方法，创建实例对象

module.exports = Behavior({
  properties: {},
  data: {username: 'zs'},
  methods: {},
})

// 组件下的.js文件中
const myBehavior = require("路径")

Component({
  behaviors: [myBehavior]
})