• 下载
  • 社区

组件对象

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

注意: onInitderiveDataFromProps 仅支持在基础库 1.14.0 版本及以上使用,可调用 my.canIUse('component2') 实现兼容,并且,需要在 IDE 中的 详情 > 项目配置 中,勾选 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 组件的方法,可以是事件响应函数或任意的自定义方法 -
ref Function 指定组件被ref引用时的返回值 1.18.0

methods

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

注意: 与 Page 不同,自定义组件需要将事件处理函数定义在 methods 中。

<!-- /components/index/index.axml -->
<view>{{counter}}</view>
<button onTap="plusOne">+1</button>
// /components/index/index.js
Component({
  data: { counter: 0 },
  methods: {
    plusOne(e) {
      console.log(e);
      this.setData({ counter: this.data.counter + 1 });
    },
  },
});

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

props

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

注意:

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

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

<!-- /components/index/index.axml -->
<view>{{counter}}</view>
<view>extra: {{extra}}</view>
<button onTap="plusOne">+1</button>

外部使用不传递 props

<!-- /pages/index/index.axml -->
<my-component />

页面输出:

0
extra: default extra
+1

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

外部使用传递 props

注意: 外部使用自定义组件时,如果传递参数是函数,一定要以 on 为前缀,否则会将其处理为字符串。

// /pages/index/index.js
Page({
  onCounterPlusOne(data) {
    console.log(data);
  },
});
<!-- /pages/index/index.axml -->
<my-component extra="external extra" onCounterPlusOne="onCounterPlusOne" />

页面输出:

0
extra: external extra
+1

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

组件实例属性

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

以下为一个简单示例:

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

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

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

组件实例方法

方法名 参数类型 说明
setData Object 设置data触发视图渲染
$spliceData Object 设置data触发视图渲染

具体使用方式同 页面