微信小程序_19,自定义组件-behaviors

什么是behaviors:

behaviors是小程序中,用于实现组件间代码共享的特性,类似于vue的mixins

behaviors的工作方式

每个behaviors可以包含一组属性,数据,生命周期函数和方法,组件引用它时,它的属性,数据和方法会被合并到组件中

每个组件可以引用多个behavior,behavior也可以引用其他的behavior

创建behavior:

调用behavior(Object object)方法即可一个共享的behavior实例对象,供所有的组件使用:
在下面创建对应文件夹和js文件:

module.exports = Behavior({
    
  // 私有数据节点
  data: {
    },
  // 属性节点
  properties: {
    },
  // 事件处理函数和自定义方法节点
  methods: {
    }
})

导入并使用behaviors:

在组件中,使用require()方法导入需要的behavior,挂载后即可访问behavior中的数据或方法,示例代码如下:

// components/myTest1/myTest1.js
const myBehavior = require('../../behaviors/myBehavior1')

Component({
    
  behaviors: [myBehavior],
})

behaviors挂载时,传入的是数组

使用：

例如这里在behavior中定义了一个data:

module.exports = Behavior({
    
  // 私有数据节点
  data: {
    
    username: 'zs'
  },
  // 属性节点
  properties: {
    },
  // 事件处理函数和自定义方法节点
  methods: {
    }
})

在引用了该behavior的组件的wxml中可以直接使用:

<text>
  behaviors共享数据:{
   {username}}
</text>

behavior中所有可用节点:

其中最常用的有:properties,data,methods,behaviors

behaviors中同名字段的覆盖和组合规则:

组件和它引用的behavior中可以包含同名的字段,此时可以参考如下3种同名时的处理规则:

1.同名的数据字段(data)
2.同名的属性(properties)或方法(methods)
3.同名的生命周期函数

关于详细的覆盖和组合规则,查看微信官方文档

比如在组件的data节点定义一个username为ls,在behavior的data中也定义一个username为ls,那么此时它会优先使用组件中的data