注意:onInit
、deriveDataFromProps
仅支持在基础库 1.14.0
版本及以上使用,可调用 my.canIUse('component2')
实现兼容。
参数 | 类型 | 是否必填 | 说明 | 最低版本 |
data | Object | 否 | 组件内部状态 | |
props | Object | 否 | 为外部传入的数据设置默认值 | |
onInit | Function | 否 | 组件生命周期函数,组件创建时触发 | 1.14.0 |
deriveDataFromProps | Function | 否 | 组件生命周期函数,组件创建时和更新前触发 | 1.14.0 |
didMount | Function | 否 | 组件生命周期函数,组件创建完毕时触发 | |
didUpdate | Function | 否 | 组件生命周期函数,组件更新完毕时触发 | |
didUnmount | Function | 否 | 组件生命周期函数,组件删除时触发 | |
mixins | Array | 否 | 组件间代码复用机制 | |
methods | Object | 否 | 组件的方法,可以是事件响应函数或任意的自定义方法 |
注: onInit
、deriveDataFromProps
仅支持在基础库 1.14.0
版本及以上使用,可调用 my.canIUse('component2')
实现兼容。
Component({ mixins:[{ didMount() {}, }], data: {y:2}, props:{x:1}, didUpdate(prevProps,prevData){}, didUnmount(){}, methods:{ onMyClick(ev){ my.alert({}); this.props.onXX({ ...ev, e2:1}); }, }, })
属性名 | 类型 | 说明 |
data | Object | 组件内部数据 |
props | Object | 传入组件的属性 |
is | String | 组件路径 |
$page | Object | 组件所属页面实例 |
$id | Number | 组件 id,可直接在组件 axml 中渲染值 |
// /components/xx/index.js Component({ didMount(){ this.$page.xxCom = this; // 通过此操作可以将组件实例挂载到所属页面实例上 console.log(this.is); console.log(this.$page); console.log(this.$id); } });
<!-- /components/xx/index.axml 组件 id 可直接在组件 axml 中渲染值 --> <view>{{$id}}</view>
// /pages/index/index.json { "usingComponents": { "xx": "/components/xx/index" } }
Page({ onReady() { console.log(this.xxCom); // 可以访问当前页面所挂载的组件 }, })
当组件在页面上渲染后,执行 didMount 回调,控制台输出如下:
/components/xx/index {$viewId: 51, route: "pages/index/index"} 1
方法名 | 参数 | 说明 | 最低版本 |
setData | Object | 设置data触发视图渲染 | |
$spliceData | Object | 设置data触发视图渲染 |