组件对象 -凯发app官方网站

更新时间：2023-11-30 18:58:27

贡献者 7

订阅更新

我的文档

设置

component 构造器

以下为一个简单示例：

// /components/index/index.js

component({

mixins: [{ didmount() {} }],

data: { y: 2 },

props: { x: 1 },

didupdate(prevprops, prevdata) {},

didunmount() {},

methods: {

onmyclick(ev) {

my.alert({});

this.props.onxx({ ...ev, e2: 1 });

});

注意

：

oninit

、

derivedatafromprops

仅支持在基础库

1.14.0

版本及以上使用，可调用

my.caniuse('component2')

实现兼容，并且，需要在 ide 中的

详情

项目配置

中，勾选

component2

。

参数

参数	类型	必填	说明	最低版本
data	object	否	组件内部状态。	-
options	object	否	一些选项（介绍相关功能时会涉及到具体的配置项，这里暂不列举）。	2.8.1
observers	object	否	数据变化观测器，用于监听 data 的变化，可查看数据变化观测器。	2.8.1
props	object	否	为外部传入的数据设置默认值。	-
oninit	function	否	组件生命周期函数，组件创建时触发。	1.14.0
derivedatafromprops	function	否	组件生命周期函数，组件创建时和更新前触发。	1.14.0
didmount	function	否	组件生命周期函数，组件创建完毕时触发。	-
didupdate	function	否	组件生命周期函数，组件更新完毕时触发。	-
didunmount	function	否	组件生命周期函数，组件删除时触发。	-
mixins	array	否	组件间代码复用机制。基础库 2.8.2 起支持传入 mixin() 实例。	-
methods	object	否	组件的方法，可以是事件响应函数或任意的自定义方法。	-
ref	function	否	指定组件被 ref 引用时或被自定义组件选择方法（如 selectownercomponent ）选中时的返回值。基础库 2.8.2 起支持通过实例方法 hasmixin('ref') 检测自定义组件使用传入了 ref 。	1.18.0
relations	object	否	组件间关系定义，可查看组件间关系。	2.8.5
externalclasses	array	否	组件接受的外部样式类，可查看外部样式类。	2.8.5
lifetimes	object	否	节点树维度的生命周期对象。可查看节点树维度生命周期。	2.8.5
rootevents	object	否	组件所在页面的页面生命周期以及页面事件处理函数声明对象。可查看 page 的 events 定义段。	2.8.6

methods

自定义组件不仅可以渲染静态数据，也可以响应用户点击事件，进而处理并触发自定义组件重新渲染。methods 中可以定义任意自定义方法。

注意

：与 page 不同，自定义组件需要将事件处理函数定义在 methods 中。

页面会渲染一个按钮，每次点击它页面的数字都会加 1。

props

自定义组件可以接受外界的输入，做完处理之后，还可以通知外界说：我做完了。这些都可以通过 props 实现。

注意

：

●

props 为外部传过来的属性，可指定默认属性，不能在自定义组件内部代码中修改。

●

自定义组件的 axml 中可以直接引用

props

属性。

●

自定义组件的 axml 中的事件只能由自定义组件的 js 的 methods 中的方法来响应，如果需要调用父组件传递过来的函数，可以在 methods 中通过

this.props

调用。

以上代码中

props

设置默认属性，然后在事件处理函数中通过

this.props

获取这些属性。

外部使用不传递 props

页面输出：

此时并未传递参数，所以页面会显示组件 js 中

props

设定的默认值。

外部使用传递 props

注意

：外部使用自定义组件时，如果传递参数是函数，一定要以

为前缀，否则会将其处理为字符串。

页面输出：

此时传递了参数，所以页面会显示外部传递的 extra 值

external extra

。

组件实例属性

属性名	类型	说明
data	object	组件内部数据。
props	object	传入组件的属性。
is	string	组件路径。
$page	object	组件所属页面实例。
$id	number	组件 id，可直接在组件 axml 中渲染值。
router	object	相对于当前自定义组件的 router 对象
pagerouter	object	相对于当前自定义组件所在页面的 router 对象

以下为一个简单示例：

当组件在页面上渲染后，执行 didmount 回调，控制台输出如下：

组件实例方法

表格中 “-” 代表支持。

方法名	参数类型	说明	webview 兼容性	native 兼容性
setdata	object	设置 data 触发视图渲染。	-	-
$splicedata	object	设置 data 触发视图渲染。	-	-
createselectorquery	-	创建 selectorquery 对象实例。	2.7.24	-
createintersectionobserver	object	创建 intersectionobserver对象实例。	2.7.4	暂不支持
createmediaqueryobserver	-	创建一个 mediaqueryobserver 对象。	2.8.2	暂不支持
gettabbar	-	获取自定义 tabbar 组件实例。	2.7.20	-
selectownercomponent	-	选取当前组件的创建者（即 axml 中定义了此组件的组件），返回它的组件实例对象（会被 ref 影响）。	2.7.22	-
selectcomposedparentcomponent	-	选取当前组件在事件冒泡路径上的父组件，返回它的组件实例对象（会被 ref 影响）。	2.7.22	-
$selectcomponent	string	根据传入的 selector 匹配器查询，返回匹配到的第一个的组件实例（会被 ref 影响）。	2.8.0	-
$selectallcomponents	string	根据传入的 selector 匹配器查询，返回匹配到的全部的组件实例数组（会被 ref 影响）。	2.8.0	-
getrelationnodes	string relationkey	获取这个关系所对应的所有关联节点。可查看组件间关系。	2.8.5	-
setupdateperformancelistener	object options , function listener	设置更新性能统计信息接收函数。可查看获取更新性能统计信息。	2.8.5	-
getsavedreloadstate	-	获取自定义组件及其所属页面重载前的状态对象。可查看 beforereload 事件	2.8.9	-
hasmixin	string	检查组件是否具有 mixin（须是通过 mixin() 创建的 mixin 实例）。注意：若自定义组件注册时传入了 ref 以指定组件返回值，则可通过 hasmixin('ref') 检查到。	2.8.2	-

$selectcomponent/$selectallcomponents

在页面或父组件中，可调用

this.$selectcomponent

this.$selectallcomponents

获取子组件实例对象。调用时需传入一个

匹配选择器 selector

。

示例：

说明：

●

组件隔离

：默认情况下，小程序与插件、不同插件之间无法通过

$selectcomponent

获取组件实例，将返回

null

。如果想在上述条件下仍然返回，可使用

ref

。

●

组件顺序

：通俗理解为所见即顺序。以当前 axml 中第一个自定义组件为起点，先子组件，再兄弟组件；当使用跨组件后代选择器（>>>）时，会先在自定义组件内部查找，再从外部查找；相同的

具名插槽

会合并。

●

组件数量

：只有实际渲染的自定义组件才能被查找到；当渲染多个 slot 插槽时，如果 slot 有自定义组件，也会查询到多份。

●

兼容性

：基础库 2.8.0 起支持，可通过

my.caniuse('component.$selectcomponent')

判断。

createintersectionobserver

native 渲染引擎

：暂不支持。

可用性判断：

createmediaqueryobserver

native 渲染引擎

：暂不支持。

可用性判断：

在页面或自定义组件中，可调用

this.createmediaqueryobserver

创建

mediaqueryobserver

实例，用于监听页面 media query 状态的变化。

示例：

说明：

●

需在

didmount

触发之后才可调用

this.createmediaqueryobserver

。因为

oninit

derivedatafromprops

触发时组件还未在视图层渲染完毕。

相关问题