tencent cloud

文档反馈

behaviors

最后更新时间:2024-03-04 23:07:33

    定义和使用 behaviors

    在腾讯云小程序平台开发中,behaviors 是用于组件间代码共享的特性,类似于一些编程语言中的“mixins”或“traits”。每个 behavior 可以包含一组属性、数据、生命周期函数和方法,组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior,而 behavior 也可以引用其他 behavior。
    behavior需要使用Behavior()构造器定义。
    代码示例:
    // my-behavior.js
    module.exports = Behavior({
    behaviors: [],
    properties: {
    myBehaviorProperty: {
    type: String
    }
    },
    data: {
    myBehaviorData: {}
    },
    attached() {},
    methods: {
    myBehaviorMethod() {}
    }
    })
    组件引用时,在behaviors定义段中将它们逐个列出即可。
    代码示例:
    // my-component.js
    const myBehavior = require('my-behavior')
    Component({
    behaviors: [myBehavior],
    properties: {
    myProperty: {
    type: String
    }
    },
    data: {
    myData: {}
    },
    attached() {},
    methods: {
    myMethod() {}
    }
    })
    在上述示例中,my-component组件定义中加入了my-behavior,而my-behavior中包含有myBehaviorProperty属性、myBehaviorData数据字段、myBehaviorMethod方法和一个attached生命周期函数。这将使得my-component中最终包含myBehaviorPropertymyProperty两个属性,myBehaviorDatamyData两个数据字段,和myBehaviorMethodmyMethod两个方法。当组件触发attached生命周期时,会依次触发 my-behavior 中的attached生命周期函数和my-component中的attached生命周期函数。

    字段的覆盖和组合规则

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

    内置 behaviors

    自定义组件可以通过引用内置的 behavior 来获得内置组件的一些行为。
    Component({
    behaviors: ['wx://form-field']
    })
    在上例中,wx://form-field代表一个内置behavior,它使得这个自定义组件有类似于表单控件的行为。
    内置behavior往往会为组件添加一些属性。在没有特殊说明时,组件可以覆盖这些属性来改变它的type或添加observer

    wx://form-field

    使自定义组件有类似于表单控件的行为。 form 组件可以识别这些自定义组件,并在 submit 事件中返回组件的字段名及其对应字段值。这将为它添加以下两个属性。
    属性名
    类型
    描述
    name
    string
    在表单中的字段名
    value
    任意
    在表单中的字段值

    wx://component-export

    使自定义组件支持export定义段。这个定义段可以用于指定组件被selectComponent调用时的返回值。
    未使用这个定义段时,selectComponent将返回自定义组件的this插件的自定义组件将返回 null。使用这个定义段时,将以这个定义段的函数返回值代替。
    代码示例:
    // 自定义组件 my-component 内部
    Component({
    behaviors: ['wx://component-export'],
    export() {
    return {myField: 'myValue'}
    }
    })
    <!-- 使用自定义组件时 -->
    <my-component id="the-id" />
    this.selectComponent('#the-id') // 等于 { myField: 'myValue' }
    
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持