Component

收藏
我的收藏
Component 构造器可用于注册自定义组件,调用 Component 构造器时可以指定组件的属性、数据、方法等。详细使用方法参见 Component 构造器

语法

Component(options);

参数说明

options 为 object 类型,属性如下:
属性名
类型
必填
说明
properties
object
组件的对外属性,是属性名到属性设置的映射表,属性设置中可包含三个字段,type 表示属性类型、value 表示属性初始值、observer 表示属性值被更改时的响应函数
data
object
组件的内部数据,和 properties 一同用于组件的模版渲染
methods
object
组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用,参见组件通信与事件
behaviors
string | string[]
类似于 mixins,参见组件行为 behaviors
created
function
组件生命周期函数,在组件实例进入页面节点树时执行,注意此时不能调用setData。基础库 2.45.0 开始支持 setData ,使用方式见同步修改数据
attached
function
组件生命周期函数,在组件实例进入页面节点树时执行
ready
function
组件生命周期函数,在组件布局完成后执行
moved
function
组件生命周期函数,在组件实例被移动到节点树另一个位置时执行
detached
function
组件生命周期函数,在组件实例被从页面节点树移除时执行
error
function
组件错误处理钩子,每当组件方法抛出错误时执行
pageLifetimes
object
组件所在页面的生命周期声明对象,参见组件生命周期
lifetimes
object
组件生命周期声明对象,优先级比同级的 attached、detached 等生命周期优先级高,参见组件生命周期
options
object
其他选项
definitionFilter
function
定义过滤器,用于自定义组件扩展,参见自定义组件扩展
注册的自定义组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件实例包含一些通用属性和方法。

组件实例属性

属性名
类型
说明
is
string
组件的文件路径
id
string
节点 id
dataset
string
节点 dataset
data
object
组件数据
properties
object
组件数据

properties 属性

属性名
数据类型
是否必填
说明
type
可选值为:String,Boolean,Object,Number,Array,Function,null
属性的类型,为 null 时表示不限制类型。基础库 2.46.0 版本后支持 Function
value
属性初始值
observer
function
属性值被更改时的响应函数,函数的第一个参数为更改后的新值,第二个参数为更改前的旧值
代码示例如下:
Component({ properties: { myProperty1: { type: String, value: "", observer(newVal, oldVal) {}, }, myProperty2: String, // 简略写法 }, });
其中 type 为 Function 类型时支持通过属性传递函数,该能力在基础库 2.46.0 及以后版本支持。
使用该特性时有以下注意事项:
    仅在 app.json 中配置 "component2": true时才生效;
    无法在 ttml 中调用函数;
    type 为 Function 时默认值为 null,当传入的属性类型不合法时会被置为默认值。

组件实例方法

方法名
参数和类型
说明
setData
data: object, callback: function
设置 data,触发无参回调 callback
hasBehavior
behavior: object
检查组件是否具有 behavior,详见组件行为 behaviors
triggerEvent
eventName: string, detail: object, options: object
触发事件,参见组件通信与事件
selectComponent
selector: string, callback: function
使用选择器选择组件实例节点,返回匹配到的第一个组件实例对象,此方法为异步方法,返回值会在请求完成后传入 callback
selectAllComponents
selector: string, callback: function
使用选择器选择组件实例节点,返回匹配到的全部组件实例对象组成的数组,此方法为异步方法,返回值会在请求完成后传入 callback
createIntersectionObserver
page: object, options: object
创建一个 IntersectionObserver 对象,选择器选取范围为这个组件实例内
createSelectorQuery
创建一个 SelectorQuery 对象,选择器选取范围为这个组件实例内

同步修改初始 data

app.json 配置项中增加配置 component2: true 后,支持在 created 生命周期中修改自定义组件初始数据。开启后,自定义组件将在 created 生命周期执行完成后开始渲染。从而解决当初始数据依赖计算逻辑时,自定义组件展示数据由默认值到真正数据切换时的闪动问题。
注意:不涉及初始渲染数据的逻辑放到其他生命周期中,避免影响整体渲染耗时。

Bug & Tip

    Tip: selectComponentselectAllComponents API 均为异步 API,需要指定回调函数;
    Tip: selectComponentselectAllComponents1.16.2.0 版本后支持同步写法。开发者需要保证在调用 API 时,页面已经渲染完毕,比如页面的 onReady、setData 的回调之后。