微信小程序组件复用机制behaviors示例详解

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;

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
        }
    }
});

<view>
    <text>{{ label }}: {{ name }}</text> <!-- 使用行为的属性和数据 -->
    <text>{{ customLabel }}</text> <!-- 使用组件的自定义属性 -->
    <text>{{ message }}</text> <!-- 使用组件的数据 -->
    <button bindtap="onTap">更新姓名</button>
</view>