全部产品
云市场
云游戏

组件对象

更新时间:2019-09-09 14:07:31

Component 构造器

参数说明

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

代码示例:

  1. Component({
  2. mixins:[{ didMount() {}, }],
  3. data: {y:2},
  4. props:{x:1},
  5. didUpdate(prevProps,prevData){},
  6. didUnmount(){},
  7. methods:{
  8. onMyClick(ev){
  9. my.alert({});
  10. this.props.onXX({ ...ev, e2:1});
  11. },
  12. },
  13. })
说明onInitderiveDataFromProps 仅支持在基础库 1.14.0 版本及以上使用,可调用 my.canIUse('component2')实现兼容。

methods

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

说明:与 Page 不同,自定义组件需要将事件处理函数定义在 methods 中。
  1. // /components/counter/index.axml
  2. <view>{{counter}}</view>
  3. <button onTap="plusOne">+1</button>
  1. // /components/counter/index.js
  2. Component({
  3. data: { counter: 0 },
  4. methods: {
  5. plusOne(e) {
  6. console.log(e);
  7. this.setData({ counter: this.data.counter + 1 });
  8. },
  9. },
  10. });

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

props

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

说明
  • props 为外部传过来的属性,可指定默认属性,不能在自定义组件内部代码中修改。
  • 自定义组件的 axml 中可以直接引用 props 属性。
  • 自定义组件的 axml 中的事件只能由自定义组件的 js 的 methods 中的方法来响应, 如果需要调用父组件传递过来的函数,可以在 methods 中通过 this.props 调用.
  1. // /components/counter/index.js
  2. Component({
  3. data: { counter: 0 },
  4. // 设置默认属性
  5. props: {
  6. onCounterPlusOne: (data) => console.log(data),
  7. extra: 'default extra',
  8. },
  9. methods: {
  10. plusOne(e) {
  11. console.log(e);
  12. const counter = this.data.counter + 1;
  13. this.setData({ counter });
  14. this.props.onCounterPlusOne(counter); // axml中的事件只能由methods中的方法响应
  15. },
  16. },
  17. });

以上代码中 props 设置默认属性,然后在事件处理函数中通过 this.props 获取这些属性。

  1. // /components/counter/index.axml
  2. <view>{{counter}}</view>
  3. <view>extra: {{extra}}</view>
  4. <button onTap="plusOne">+1</button>
  1. // /pages/index/index.json
  2. {
  3. "usingComponents": {
  4. "my-component": "/components/counter/index"
  5. }
  6. }

外部使用不传递 props

  1. // /pages/index/index.axml
  2. <my-component />

页面输出:

  1. 0
  2. extra: default extra
  3. +1

此时并未传递参数,所以页面会显示组件 js 中 props 设定的默认值。

外部使用传递 props

说明:外部使用自定义组件时,如果传递参数是函数,一定要以 on 为前缀,否则会将其处理为字符串。
  1. // /pages/index/index.js
  2. Page({
  3. onCounterPlusOne(data) {
  4. console.log(data);
  5. },
  6. });
  1. // /pages/index/index.axml
  2. <my-component extra="external extra" onCounterPlusOne="onCounterPlusOne" />

页面输出:

  1. 0
  2. extra: external extra
  3. +1

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

组件实例属性

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

代码示例:

  1. // /components/index/index.js
  2. Component({
  3. didMount(){
  4. this.$page.xxCom = this; // 通过此操作可以将组件实例挂载到所属页面实例上
  5. console.log(this.is);
  6. console.log(this.$page);
  7. console.log(this.$id);
  8. }
  9. });
  1. <!-- /components/index/index.axml 组件 id 可直接在组件 axml 中渲染值 -->
  2. <view>{{$id}}</view>
  1. // /pages/index/index.json
  2. {
  3. "usingComponents": {
  4. "my-component": "/components/index/index"
  5. }
  6. }
  1. // /pages/index/index.js
  2. Page({
  3. onReady() {
  4. console.log(this.xxCom); // 可以访问当前页面所挂载的组件
  5. },
  6. })

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

  1. /components/index/index
  2. {$viewId: 51, route: "pages/index/index"}
  3. 1

组件实例方法

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

具体使用方式同 页面