Weex——组件定义

定义组件是通过一组选项来描述一个组件。这组选项总是被赋值给

事件

module.exports = {
  data: ...,
  methods: {
    foo: function () {
      ...
      this.$emit('customtype1', data)
    }
  },
  events: {
    customtype1: function (e) {
      console.log(e.type, e.detail)
    }
  },
  ...
}

events 选项允许你在视图模型被创建时注册自定义事件。然后，它会监听这些类型的事件，并通过函数类型的值处理它们。

Weex 会把一个事件对象作为第一个参数传递给其绑定的事件，这个事件对象在 e.detail 中包含事件数据。

生命周期

module.exports = {
  data: ...,
  methods: ...,
  init: function () {
    console.log('ViewModel constructor begins')
  },
  created: function () {
    console.log('Data observation finished')
  },
  ready: function () {
    console.log('Virtual DOM finished')
  },
  ...
}

Weex 视图模型现在支持生命周期内的钩子函数，这些钩子函数能被写为组件选项：

• init: 在视图模型的构造函数开始调用时激活；
• created: 当视图模型监听默认数据，但还未编译模板时激活；
• ready: 当视图模型监听默认数据并且编译模板生成虚拟DOM后被激活。

注意：当 methods、events 或生命周期方法作为参数传递给别的函数时，务必确认函数执行时的上下文符合您的预期，例如：

module.exports = {
  data: function () {
    return {x: 1, y: 2}
  },
  ready: function () {
    // `undefined`
    // 因为上下文发生了变化
    this.foo(this.bar)
    // `1`
    // 正确绑定上下文之后可以得到预期的值
    this.foo(this.bar.bind(this))
  },
  methods: {
    foo: function (fn) {
      return fn()
    },
    bar: function () {
      return this.x
    }
  }
}