Component Definition

0.4 cn

A component definition is a set of options to describe a component. It's always assigned to module.exports in <script>.

module.exports = {
  // a set of options here
}

Data & Methods options

module.exports = {
  data: function () {
    return {x: 1, y: 2}
  },
  methods: {
    doThis: function () {...},
    doThat: function () {...}
  },
  ...
}

The data option is a function that return a observable data object for this ViewModel. The methods option is a map which contains all ViewModel methods.

Each data or methods property will be proxied to the ViewModel instance. So you can read and write data with this.x, also you can call methods with this.doThis(...).

A whole example:

<template>
  <div style="width: {{w}}; height: {{h}}; background-color: red;" onclick="update"></div>
</template>
<script>
  module.exports = {
    data: function () {
      return {w: 750, h: 200}
    },
    methods: {
      update: function (e) {
        this.h += 200
      }
    }
  }
</script>

Events options

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

The events options could allow you to add custom event listeners when ViewModel created. Then it will listen these type of events and handle them by the function-type value.

The first argument is a event object which contains event data in e.detail.

Lifecycle options

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 ViewModel now supports these lifecycle hook functions which could be write as component options:

• init: fired at the beginning of a ViewModel constructor call.
• created: fired when ViewModel observes default data but not compile the template.
• ready: fired when ViewModel observes default data and compiles the template to generate virtual DOM finally.

Note: If you want to use the function in methods, events or lifecycle options as a parameter, please make sure the context is correct as expect. For example:

module.exports = {
  data: function () {
    return {x: 1, y: 2}
  },
  ready: function () {
    // `undefined`
    // because the context changed
    this.foo(this.bar)
    // `1`
    // because the context bound correct
    this.foo(this.bar.bind(this))
  },
  methods: {
    foo: function (fn) {
      return fn()
    },
    bar: function () {
      return this.x
    }
  }
}