Component

更新时间 2024-07-24 02:58:49

我的收藏

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

语法

js复制
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	否	属性值被更改时的响应函数，函数的第一个参数为更改后的新值，第二个参数为更改前的旧值

代码示例如下：

js复制
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 生命周期执行完成后开始渲染。从而解决当初始数据依赖计算逻辑时，自定义组件展示数据由默认值到真正数据切换时的闪动问题。

注意：不涉及初始渲染数据的逻辑放到其他生命周期中，避免影响整体渲染耗时。