微信小程序-组件复用机制behaviors

news/2025/2/23 19:51:21

简介:

小程序的 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>