目录

一、组件生命周期

二、 组件所在页面的生命周期

三、组件 component

四、组件传值

1、父传子

2、子传父

五、组件 代码共享 behaviors

1、behavior 特性：

2、如何在组件中使用behavior ？

3、behavior 字段的覆盖和组合规则

4、细说 behavior 参数

5、如何使用内置 behaviors？

六、组件间关系  relations

1、relations 定义段

2、定义和使用组件间关系

3、关联一类组件

七、数据监听

八、抽象节点

一、组件生命周期

• 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
• 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
• 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

代码示例：

Component({  lifetimes: {    attached: function() {      // 在组件实例进入页面节点树时执行    },    detached: function() {      // 在组件实例被从页面节点树移除时执行    },  },  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容  attached: function() {    // 在组件实例进入页面节点树时执行  },  detached: function() {    // 在组件实例被从页面节点树移除时执行  },  // ...})

二、 组件所在页面的生命周期

代码示例：

Component({  pageLifetimes: {    show: function() {      // 页面被展示    },    hide: function() {      // 页面被隐藏    },    resize: function(size) {      // 页面尺寸变化    }  }})

三、组件 component

细说 component 参数 请戳这里：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html

四、组件传值

1、父传子

• 通过 WXML 数据绑定
• 通过 this.selectComponent 方法

2、子传父

• 通过：事件

五、组件 代码共享 behaviors

1、behavior 特性：

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

2、如何在组件中使用behavior ？

在 behaviors 定义段中将它们逐个列出即可。

代码示例：

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

在上例中， 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 生命周期函数。

3、behavior 字段的覆盖和组合规则

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

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

4、细说 behavior 参数

请戳这里：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Behavior.html

5、如何使用内置 behaviors？

请戳这里：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html ，然后找到“内置 behaviors”。

六、组件间关系  relations

1、relations 定义段

relations 定义段包含目标组件路径及其对应选项，可包含的选项见下表。

2、定义和使用组件间关系

代码示例：

<custom-ul>  <custom-li> item 1 </custom-li>  <custom-li> item 2 </custom-li></custom-ul>

这个例子中， custom-ul 和 custom-li 都是自定义组件，它们有相互间的关系，相互间的通信往往比较复杂。此时在组件定义时加入 relations 定义段，可以解决这样的问题。示例：

// path/to/custom-ul.jsComponent({  relations: {    './custom-li': {      type: 'child', // 关联的目标节点应为子节点      linked: function(target) {        // 每次有custom-li被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后      },      linkChanged: function(target) {        // 每次有custom-li被移动后执行，target是该节点实例对象，触发在该节点moved生命周期之后      },      unlinked: function(target) {        // 每次有custom-li被移除时执行，target是该节点实例对象，触发在该节点detached生命周期之后      }    }  },  methods: {    _getAllLi: function(){      // 使用getRelationNodes可以获得nodes数组，包含所有已关联的custom-li，且是有序的      var nodes = this.getRelationNodes('path/to/custom-li')    }  },  ready: function(){    this._getAllLi()  }})

// path/to/custom-li.jsComponent({  relations: {    './custom-ul': {      type: 'parent', // 关联的目标节点应为父节点      linked: function(target) {        // 每次被插入到custom-ul时执行，target是custom-ul节点实例对象，触发在attached生命周期之后      },      linkChanged: function(target) {        // 每次被移动后执行，target是custom-ul节点实例对象，触发在moved生命周期之后      },      unlinked: function(target) {        // 每次被移除时执行，target是custom-ul节点实例对象，触发在detached生命周期之后      }    }  }})

注意：必须在两个组件定义中都加入relations定义，否则不会生效。

3、关联一类组件

代码示例：

<custom-form>  <view>    input    <custom-input></custom-input>  </view>  <custom-submit> submit </custom-submit></custom-form>

custom-form 组件想要关联 custom-input 和 custom-submit 两个组件。此时，如果这两个组件都有同一个behavior：

// path/to/custom-form-controls.jsmodule.exports = Behavior({  // ...})

// path/to/custom-input.jsvar customFormControls = require('./custom-form-controls')Component({  behaviors: [customFormControls],  relations: {    './custom-form': {      type: 'ancestor', // 关联的目标节点应为祖先节点    }  }})

// path/to/custom-submit.jsvar customFormControls = require('./custom-form-controls')Component({  behaviors: [customFormControls],  relations: {    './custom-form': {      type: 'ancestor', // 关联的目标节点应为祖先节点    }  }})

则在 relations 关系定义中，可使用这个behavior来代替组件路径作为关联的目标节点：

// path/to/custom-form.jsvar customFormControls = require('./custom-form-controls')Component({  relations: {    'customFormControls': {      type: 'descendant', // 关联的目标节点应为子孙节点      target: customFormControls    }  }})

七、数据监听

详情请戳这里：https://blog.csdn.net/mChales_Liu/article/details/98758788

八、抽象节点

详情请戳这里：https://blog.csdn.net/mChales_Liu/article/details/98760798