Component 构造器

Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。

详细的参数含义和使用请参考 Component 参考文档。

代码示例

Component({
  behaviors: [],

  properties: {
    myProperty: {
      // 类型（必填），目前可使用的类型包括：String, Number, Boolean, Object, Array，Function, null（表示 any 类型）
      type: String,

      // 属性的默认值 (可选), 如果没有特别指定，会根据类型指定一个默认值
      value: '',

      // 当属性改变时执行的函数（可选），方法名称也可以是字符串，如：'_myPropertyChange'
      observer(newVal, oldVal) {
         // newVal 是属性更新后的新值，oldVal 是更新前的旧值
      }
    },
    myPropertyB: String // 简易写法
  },

  // 私有数据，可用于视图渲染
  data: {},

  // 生命周期方法
  attached() {
    this.selectComponent('.class-name', (res) => {
      console.log(res)
    })
  },

  ready() { },

  lifetimes: {
    //  lifetimes 中定义的生命周期方法优先级更高
    attached() {},
    // ....
  },

  // 组件的自定义方法
  methods: {
    onMyButtonTap() {
      this.setData({ ... })
    },

    _myPrivateMethod() {
      // 将 data.A[0].B 更新为 'test'
      this.setData({
        'A[0].B': 'test'
      })
    },

    _myPropertyChange(newVal, oldVal) {

    }
  }
})

使用 Component 构造器构造页面

小程序的页面也可以视为自定义组件。因此页面也可以使用 Component 构造器构造，拥有与普通组件一样的定义与实例方法。

此时，组件的属性可以用于接收页面的参数，如访问页面 /pages/index/index?paramA=123&paramB=xyz ，如果声明有属性 paramA 或 paramB ，则它们会被赋值为 123 或 xyz 。

代码示例

在组件代码中

Component({
  properties: {
    paramA: Number,
    paramB: String,
  },

  methods: {
    onLoad() {
      this.data.paramA; // Page parameter paramA value
      this.data.paramB; // Page parameter paramB value
    },
  },
});

使用 Component 构造器来构造页面的一个好处是可以使用 behaviors 来提取所有页面中公用的代码段。

例如，在所有页面被创建和销毁时都要执行同一段代码，就可以把这段代码提取到 behaviors 中。

代码示例

// page-common-behavior.js
module.exports = Behavior({
  attached() {
    // 页面创建时执行
    console.info("Page loaded!");
  },
  detached() {
    // 页面销毁时执行
    console.info("Page unloaded!");
  },
});

// 页面 A
const pageCommonBehavior = require("./page-common-behavior");
Component({
  behaviors: [pageCommonBehavior],
  data: {
    /* ... */
  },
  methods: {
    /* ... */
  },
});

// 页面 B
const pageCommonBehavior = require("./page-common-behavior");
Component({
  behaviors: [pageCommonBehavior],
  data: {
    /* ... */
  },
  methods: {
    /* ... */
  },
});

Bug & Tip

Tip: 在 properties 定义中，属性名采用驼峰写法（propertyName）。在 ttml 中，指定属性值时则对应使用连字符写法（my-component property-name="value"），应用于数据绑定时采用驼峰写法（attr="{{propertyName}}"）；
Tip: 直接对 data中的属性赋值不会引起视图变化。我们建议将不参与视图渲染的数据放到自定义段中，例如 pureData，通过赋值的方式修改数据而非 setData，从而避免页面产生不必要的重渲染导致性能劣化；
Bug: 需要避免使用 on/bind/catch/capture-bind/capture-catch 开头的属性命名，会被基础库识别为事件名从而导致属性传递失效。

点击纠错

该文档是否对你的开发有所帮助？

有帮助

没帮助

该文档是否对你的开发有所帮助？

有帮助

没帮助

Component 构造器
使用 Component 构造器构造页面
Bug & Tip