tencent cloud

文档反馈

自定义组件

最后更新时间:2024-07-12 18:38:20

    Component

    创建自定义组件,接受一个 Object 类型的参数。

    参数

    Object object

    定义段
    类型
    是否必填
    描述
    properties
    Object Map
    组件的对外属性,是属性名到属性设置的映射表
    data
    Object
    组件的内部数据,和 properties 一同用于组件的模板渲染
    observers
    Object
    组件数据字段监听器,用于监听 properties 和 data 的变化,参见 数据监听器
    methods
    Object
    组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用,参见 组件间通信与事件
    behaviors
    String Array
    类似于 mixins 和 traits 的组件间代码复用机制,参见 behaviors
    created
    Function
    组件生命周期函数-在组件实例刚刚被创建时执行,注意此时不能调用 setData
    attached
    Function
    组件生命周期函数-在组件实例进入页面节点树时执行
    ready
    Function
    组件生命周期函数-在组件布局完成后执行
    detached
    Function
    组件生命周期函数-在组件实例被从页面节点树移除时执行
    relations
    Object
    组件间关系定义,参见 组件间关系
    externalClasses
    String Array
    组件接受的外部样式类,参见 外部样式类
    options
    Object Map
    一些选项(文档中介绍相关特性时会涉及具体的选项设置,这里暂不列举)
    lifetimes
    Object
    组件生命周期声明对象,参见 组件生命周期
    pageLifetimes
    Object
    组件所在页面的生命周期声明对象,参见 组件生命周期
    生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件包含一些通用属性和方法。
    属性名
    类型
    描述
    is
    String
    组件的文件路径
    id
    String
    节点 id
    dataset
    String
    节点 dataset
    data
    Object
    组件数据,包括内部数据和属性值
    properties
    Object
    组件数据,包括内部数据和属性值(与 data 一致)
    方法名
    参数
    描述
    setData
    Object newData
    设置 data 并执行视图层渲染
    triggerEvent
    String name, Object detail, Object options
    触发事件,参见 组件间通信与事件
    createSelectorQuery
    -
    创建一个 SelectorQuery 对象,选择器选取范围为这个组件实例内
    createIntersectionObserver
    -
    创建一个 IntersectionObserver 对象,选择器选取范围为这个组件实例内
    selectComponent
    String selector
    使用选择器选择组件实例节点,返回匹配到的第一个组件实例对象(会被 wx://component-export影响)
    selectAllComponents
    String selector
    使用选择器选择组件实例节点,返回匹配到的全部组件实例对象组成的数组(会被wx://component-export影响)
    selectownerComponent
    String selector
    使用选择器选择组件实例节点,返回匹配到的全部组件实例对象组成的数组(会被 wx://component-export 影响)
    getRelationNodes
    String relationKey
    获取这个关系所对应的所有关联节点,参见 组件间关系
    hasBehavior
    Object behavior
    检查组件是否具有 behavior(检查时会递归检查被直接或间接引入的所有behavior)
    示例代码:
    Component({
    behaviors: [],
    // 属性定义(详情参见下文)
    properties: {
    myProperty: { // 属性名
    type: String,
    value: ''
    },
    myProperty2: String // 简化的定义方式
    },
    
    data: {}, // 私有数据,可用于模板渲染
    
    lifetimes: {
    // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
    attached: function () { },
    detached: function () { },
    },
    
    // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
    attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
    ready: function() { },
    
    pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    },
    
    methods: {
    onMyButtonTap: function(){
    this.setData({
    // 更新属性和数据的方法与更新页面数据的方法类似
    })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod: function(){
    // 这里将 data.A[0].B 设为 'myPrivateData'
    this.setData({
    'A[0].B': 'myPrivateData'
    })
    },
    _propertyChange: function(newVal, oldVal) {
    
    }
    }
    })

    properties

    定义段
    类型
    是否必填
    描述
    type
    -
    属性的类型
    value
    -
    属性的初始值
    observer
    Function
    属性值变化时的回调函数
    属性值的改变情况可以使用 observer 来监听。目前,在新版本基础库中不推荐使用这个字段,而是使用 Component 构造器的 observers 字段代替,它更加强大且性能更好。
    注意:
    定义段中的 type 字段为 必填 项。
    示例代码:
    Component({
    properties: {
    min: {
    type: Number,
    value: 0
    },
    max: {
    type: Number,
    value: 0,
    observer: function(newVal, oldVal) {
    // 属性值变化时执行
    }
    },
    lastLeaf: {
    // 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种
    type: Number,
    optionalTypes: [String, Object],
    value: 0
    }
    }
    })
    属性的类型可以为 String Number Boolean Object Array 其一,也可以为 null 表示不限制类型。
    多数情况下,属性最好指定一个确切的类型。这样,在 WXML 中以字面量指定属性值时,值可以获得一个确切的类型,如:
    <custom-comp min="1" max="5" />
    此时,由于自定义组件的对应属性被规定为 Number 类型, minmax 会被赋值为 15 ,而非 "1""5" ,即:
    this.data.min === 1 // true
    this.data.max === 5 // true

    tips

    使用 this.data 可以获取内部数据和属性值;但直接修改它不会将变更应用到界面上,应使用 setData 修改;
    生命周期函数无法在组件方法中通过 this 访问到;
    属性名应避免以 data 开头,即不要命名成 dataXyz 这样的形式,因为在 WXML 中, data-xyz="" 会被作为节点 dataset 来处理,而不是组件属性;
    在一个组件的定义和使用时,组件的属性名和 data 字段相互间都不能冲突(尽管它们位于不同的定义段中)。

    Behavior

    注册一个 behavior,接受一个 Object 类型的参数。

    参数

    Object object

    定义段
    类型
    是否必填
    描述
    properties
    Object Map
    同组件的属性
    data
    Object
    同组件的数据
    methods
    Object
    同自定义组件的方法
    behaviors
    String Array
    类似于 mixins 和 traits 的组件间代码复用机制,参见 behaviors
    created
    Function
    组件生命周期函数-在组件实例刚刚被创建时执行,注意此时不能调用setData
    attached
    Function
    组件生命周期函数-在组件实例进入页面节点树时执行
    ready
    Function
    组件生命周期函数-在组件布局完成后执行
    detached
    Function
    组件生命周期函数-在组件实例被从页面节点树移除时执行
    relations
    Object
    组件间关系定义,参见 组件间关系
    lifetimes
    Object
    组件生命周期声明对象,参见 组件生命周期
    pageLifetimes
    Object
    组件所在页面的生命周期声明对象,参见 组件生命周期
    代码示例:
    // my-behavior.js
    module.exports = Behavior({
    behaviors: [],
    properties: {
    myBehaviorProperty: {
    type: String
    }
    },
    data: {
    myBehaviorData: {}
    },
    attached: function(){},
    methods: {
    myBehaviorMethod: function(){}
    }
    })
    
    联系我们

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

    技术支持

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

    7x24 电话支持