微信小程序组件复用机制behaviors示例详解
作者：自信的飞
小程序的 behaviors方法是一种代码复用的方式,可以将一些通用的逻辑和方法提取出来,然后在多个组件中复用,从而减少代码冗余,提高代码的可维护性,这篇文章主要介绍了微信小程序组件复用机制behaviors示例详解,需要的朋友可以参考下
简介:
小程序的 behaviors方法是一种代码复用的方式,可以将一些通用的逻辑和方法提取出来,然后在多个组件中复用,从而减少代码冗余,提高代码的可维护性。
使用 behaviors 复用代码
如果需要复用代码，可以通过 Behavior() 方法定义一个行为，每个行为可以包含属性、数据、生命周期函数和方法。组件引用该行为时，其属性、数据和方法会被合并到组件中，生命周期函数也会在相应时机被调用。
组件引用它时，它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。
具体示例:
一、定义 Behavior
将公共的属性、数据、生命周期函数、方法等，抽取到单独的文件夹 behavior.js中
声明并暴露出去
const Behavior = Behavior({
// 属性
properties: {
label: {
type: String,
value: '我已同意该协议'
}
},
// 数据
data: {
name: 'Tom',
obj: {
name: 'Tyke'
}
},
// 方法
methods: {
updateName() {
this.setData({
name: 'Jerry'
})
}
},
// 生命周期
lifetimes: {
attached() {
console.log('我是组件的生命周期函数')
}
}
});
module.exports = Behavior;二、创建组件:
在component/example/example.js中创建一个组件,引用注册之前定义的Behavior
const behavior = require('../../behaviors/behavior.js');
Component({
behaviors: [behavior], // 引用行为
properties: {
customLabel: String // 自定义属性
},
data: {
message: 'Hello Behavior!'
},
methods: {
onTap() {
this.updateName(); // 调用行为中的方法
console.log(this.data.name); // 输出: Jerry
}
}
});注册behavior后,当前被注册组件拥有 behavior中的所有属性、数据、方法，也能触发生命周期
三、组件模版
在component/example/example.wxml 文件中获取数据并渲染
<view>
<text>{{ label }}: {{ name }}</text> <!-- 使用行为的属性和数据 -->
<text>{{ customLabel }}</text> <!-- 使用组件的自定义属性 -->
<text>{{ message }}</text> <!-- 使用组件的数据 -->
<button bindtap="onTap">更新姓名</button>
</view>存在了相同项的情况处理
如果在behavior和 当前匿名组件中存储了相同的项,并且项中有相同的变量
此时遵循就近原则(在自定义组件内部定义的会覆盖 behavior.js文件中定义的)
具体情况如下:
- 存在相同的 properties
- 就近原则，使用组件内部的数据
- 存在相同的方法
- 就近原则，使用组件内部的数据
- 存在相同的 data
- 如果是对象类型，属性会进行合并
- 如果不是对象类型的数据，就近原则，展示的以组件内部为准
- 存在相同的生命周期函数和observers
- 生命周期函数都会被触发(不会相互覆盖,会是在对应触发时机被逐个调用,也就是都会被执行)
如果有同名的属性或方法,采用"就近原则",组件会覆盖behavior中的同名属性或方法
如果有同名的数据字段且都是对象类型,会进行对象合并,其余情况会采用“就近原则"进行数据覆盖
到此这篇关于微信小程序组件复用机制behaviors的文章就介绍到这了,更多相关微信小程序behaviors内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！