文档中心 > 店铺动态卡片-开发指引

组件对象

更新时间:2023/02/06 访问次数:14352

一、Component 构造器


注意:onInitderiveDataFromProps 仅支持在基础库 1.14.0 版本及以上使用,可调用 my.canIUse('component2')实现兼容。


1. 参数说明


参数 类型 是否必填 说明 最低版本
data Object 组件内部状态  
props Object 为外部传入的数据设置默认值  
onInit Function 组件生命周期函数,组件创建时触发 1.14.0
deriveDataFromProps Function 组件生命周期函数,组件创建时和更新前触发 1.14.0
didMount Function 组件生命周期函数,组件创建完毕时触发  
didUpdate Function 组件生命周期函数,组件更新完毕时触发  
didUnmount Function 组件生命周期函数,组件删除时触发  
mixins Array 组件间代码复用机制  
methods Object 组件的方法,可以是事件响应函数或任意的自定义方法  


注: onInitderiveDataFromProps 仅支持在基础库 1.14.0 版本及以上使用,可调用 my.canIUse('component2')实现兼容。


2. 示例代码


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});
    },
  },
})


二、组件实例属性列表

1. 参数说明


属性名 类型 说明
data Object 组件内部数据
props Object 传入组件的属性
is String 组件路径
$page Object 组件所属页面实例
$id Number 组件 id,可直接在组件 axml 中渲染值


2. 示例代码


1)js 示例代码:


// /components/xx/index.js
Component({
  didMount(){
    this.$page.xxCom = this; // 通过此操作可以将组件实例挂载到所属页面实例上
    console.log(this.is);
    console.log(this.$page);
    console.log(this.$id);
  }
});


2)axml 示例代码:


<!-- /components/xx/index.axml 组件 id 可直接在组件 axml 中渲染值 -->
<view>{{$id}}</view>


3)json 示例代码:


// /pages/index/index.json
{
  "usingComponents": {
    "xx": "/components/xx/index"
  }
}


4)js 示例代码:


Page({
  onReady() {
    console.log(this.xxCom); // 可以访问当前页面所挂载的组件
  },
})


当组件在页面上渲染后,执行 didMount 回调,控制台输出如下:


/components/xx/index
{$viewId: 51, route: "pages/index/index"}
1


三、组件实例方法列表


方法名 参数 说明 最低版本
setData Object 设置data触发视图渲染  
$spliceData Object 设置data触发视图渲染  


FAQ

关于此文档暂时还没有FAQ
返回
顶部