component使用

组件模板

组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。 在组件模板中能够提供一个 <slot> 节点，用于承载组件引用时提供的子节点。 注意，在模板中引用到的自定义组件及其对应的节点名须要在 json 文件中显式定义，不然会被看成一个无心义的节点。html

<!-- 组件模板 --> <view class="wrapper"> <view>这里是组件的内部节点</view> <slot></slot> </view> 

<!-- 引用组件的页面模板 --> <view> <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}"> <!-- 这部份内容将被放置在组件 <slot> 的位置上 --> <view>这里是插入到组件slot中的内容</view> </component-tag-name> </view> 

组件的属性 propA 和 propB 将收到页面传递的数据。页面能够经过 setData 来改变绑定的数据字段。前端

默认状况下，一个组件的wxml中只能有一个slot。须要使用多slot时，能够在组件js中声明启用。编程

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

此时，能够在这个组件的wxml中使用多个slot，以不一样的 name 来区分。json

<!-- 组件模板 --> <view class="wrapper"> <slot name="before"></slot> <view>这里是组件的内部细节</view> <slot name="after"></slot> </view> 

使用时，用 slot 属性来将节点插入到不一样的slot上。小程序

<!-- 引用组件的页面模板 --> <view> <component-tag-name> <!-- 这部份内容将被放置在组件 <slot name="before"> 的位置上 --> <view slot="before">这里是插入到组件slot name="before"中的内容</view> <!-- 这部份内容将被放置在组件 <slot name="after"> 的位置上 --> <view slot="after">这里是插入到组件slot name="after"中的内容</view> </component-tag-name> </view> 

构造器

Component构造器可用于定义组件，调用Component构造器时能够指定组件的属性、数据、方法等。 小程序中并无父子组件的关系谱，组件的数据不会区分props和state，所有是统一的data，而且所有是动态的。任何data的修改都会触发Rerender。缓存

定义段	类型	是否必填	描述	最低版本
properties	Object Map	否	组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数
data	Object	否	组件的内部数据，和 properties 一同用于组件的模板渲染
methods	Object	否	组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 组件事件
behaviors	String Array	否	相似于mixins和traits的组件间代码复用机制，参见 behaviors
created	Function	否	组件生命周期函数，在组件实例刚刚被建立时执行，注意此时不能调用 setData ，参见 组件生命周期
attached	Function	否	组件生命周期函数，在组件实例进入页面节点树时执行，参见 组件生命周期
ready	Function	否	组件生命周期函数，在组件布局完成后执行，参见 组件生命周期
moved	Function	否	组件生命周期函数，在组件实例被移动到节点树另外一个位置时执行，参见 组件生命周期
detached	Function	否	组件生命周期函数，在组件实例被从页面节点树移除时执行，参见 组件生命周期
relations	Object	否	组件间关系定义，参见 组件间关系
externalClasses	String Array	否	组件接受的外部样式类，参见 外部样式类
options	Object Map	否	一些选项（文档中介绍相关特性时会涉及具体的选项设置，这里暂不列举）
lifetimes	Object	否	组件生命周期声明对象，参见 组件生命周期	2.2.3
pageLifetimes	Object	否	组件所在页面的生命周期声明对象，支持页面的 show 、 hide 等生命周期，参见 组件生命周期	2.2.3
definitionFilter	Function	否	定义段过滤器，用于自定义组件扩展，参见 自定义组件扩展

Component({

  behaviors: [], properties: { myProperty: { // 属性名 type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） value: '', // 属性初始值（可选），若是未指定则会根据类型选择一个 observer(newVal, oldVal, changedPath) { // 属性被改变时执行的函数（可选），也能够写成在methods段中定义的方法名字符串, 如：'_propertyChange' // 一般 newVal 就是新设置的数据， oldVal 是旧数据 } }, myProperty2: String // 简化的定义方式 }, data: {}, // 私有数据，可用于模板渲染 lifetimes: { // 生命周期函数，能够为函数，或一个在methods段中定义的方法名 attached() { }, moved() { }, detached() { }, }, // 生命周期函数，能够为函数，或一个在methods段中定义的方法名 attached() { }, // 此处attached的声明会被lifetimes字段中的声明覆盖 ready() { }, pageLifetimes: { // 组件所在页面的生命周期函数 show() { }, hide() { }, resize() { }, }, methods: { onMyButtonTap() { this.setData({ // 更新属性和数据的方法与更新页面数据的方法相似 }) }, // 内部方法建议如下划线开头 _myPrivateMethod() { // 这里将 data.A[0].B 设为 'myPrivateData' this.setData({ 'A[0].B': 'myPrivateData' }) }, _propertyChange(newVal, oldVal) { } } }) 

使用 Component 构造器构造页面

事实上，小程序的页面也能够视为自定义组件。于是，页面也可使用 Component 构造器构造，拥有与普通组件同样的定义段与实例方法。但此时要求对应 json 文件中包含 usingComponents 定义段。架构

此时，组件的属性能够用于接收页面的参数，如访问页面 /pages/index/index?paramA=123&paramB=xyz ，若是声明有属性 paramA 或 paramB ，则它们会被赋值为 123 或 xyz 。app

页面的生命周期方法（即 on 开头的方法），应写在 methods 定义段中。编程语言

{
  "usingComponents": {} } 

Component({

  properties: { paramA: Number, paramB: String, }, methods: { onLoad() { this.data.paramA // 页面参数 paramA 的值 this.data.paramB // 页面参数 paramB 的值 } } }) 

触发事件

自定义组件触发事件时，须要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：ide

<!-- 在自定义组件中 --> <button bindtap="onTap">点击这个按钮将触发“myevent”事件</button> 

Component({
  properties: {}, methods: { onTap() { const myEventDetail = {} // detail对象，提供给事件监听函数 const myEventOption = {} // 触发事件的选项 this.triggerEvent('myevent', myEventDetail, myEventOption) } } }) 

触发事件的选项包括：

选项名	类型	是否必填	默认值	描述
bubbles	Boolean	否	false	事件是否冒泡
composed	Boolean	否	false	事件是否能够穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其余任何组件内部
capturePhase	Boolean	否	false	事件是否拥有捕获阶段

监听事件

事件系统是组件间通讯的主要方式之一。自定义组件能够触发任意的事件，引用组件的页面能够监听这些事件。 监听自定义组件事件的方法与监听基础组件事件的方法彻底一致：

<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 --> <component-tag-name bindmyevent="onMyEvent" /> <!-- 或者能够写成 --> <component-tag-name bind:myevent="onMyEvent" /> 

Page({
  onMyEvent(e) {
    e.detail // 自定义组件触发事件时提供的detail对象 } }) 

behavior使用

behaviors 是用于组件间代码共享的特性，相似于一些编程语言中的“mixins”或“traits”。

每一个 behavior 能够包含一组属性、数据、生命周期函数和方法，组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每一个组件能够引用多个 behavior 。 behavior 也能够引用其余 behavior 。

behavior 须要使用 Behavior() 构造器定义。

// my-behavior.js module.exports = Behavior({ behaviors: [], properties: { myBehaviorProperty: { type: String } }, data: { myBehaviorData: {} }, attached() {}, methods: { myBehaviorMethod() {} } }) 

// my-component.js const myBehavior = require('my-behavior') Component({ behaviors: [myBehavior], properties: { myProperty: { type: String } }, data: { myData: {} }, attached() {}, methods: { myMethod() {} } }) 

在上例中， my-component 组件定义中加入了 my-behavior ，而 my-behavior 中包含有 myBehaviorProperty 属性、 myBehaviorData 数据字段、 myBehaviorMethod 方法和一个 attached 生命周期函数。这将使得 my-component 中最终包含 myBehaviorProperty 、 myProperty 两个属性， myBehaviorData 、 myData 两个数据字段，和 myBehaviorMethod 、 myMethod 两个方法。当组件触发 attached 生命周期时，会依次触发 my-behavior 中的 attached 生命周期函数和 my-component 中的 attached 生命周期函数。

 

组件和它引用的 behavior 中能够包含同名的字段，对这些字段的处理方法以下：

• 若是有同名的属性或方法，组件自己的属性或方法会覆盖 behavior 中的属性或方法，若是引用了多个 behavior ，在定义段中靠后 behavior 中的属性或方法- 会覆盖靠前的属性或方法；
• 若是有同名的数据字段，若是数据是对象类型，会进行对象合并，若是是非对象类型则会进行相互覆盖；
• 生命周期函数不会相互覆盖，而是在对应触发时机被逐个调用。若是同一个 behavior 被一个组件屡次引用，它定义的生命周期函数只会被执行一次。

 

----------------------------------------

小程序系列：

  前言

  项目结构

  生命周期

  请求与封装

  数据绑定

  事件

  基础使用： component使用 、 wxs使用 、 节点操做 、 页面跳转 、 缓存

  前端架构浅谈

----------------------------------------