组件定义 #31

Open
DoranYun opened this Issue Jun 28, 2016 · 7 comments

Projects

None yet

6 participants

@DoranYun
DoranYun commented Jun 28, 2016 edited

本文档已迁移至 https://weex-project.io/cn/references/advanced/extend-to-html5.html , 此处不再维护,谢谢。

组件定义

原文

定义组件是通过一组选项来描述一个组件。这组选项总是被赋值给 <script> 标签中的 module.exports

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

数据和方法

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

data 选项是一个函数,它返回这个视图模型可监听的数据对象。而 methods 是一个映射,其中包含所有视图模型的方法。

每个 datamethod 属性将被代理到视图模型实例中。所以,你能通过 this.x 读写数据,或者通过 this.doThis() 调用方法。

一个完整的例子:

<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>

事件

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后被激活。

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

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
    }
  }
}
@richardyuq

牛逼

@yuanzx
yuanzx commented Nov 7, 2016 edited

能举一个events的使用场景么?

@removeAllBug

我也想知道event到底是干嘛的

@RrtoyewxXu

@yuanzx 感觉就是你自己自定义事件,指定回调时机,然后在相应回调中调用你写的事件。我是这么感觉的,不知道对不对

@zxy1778
zxy1778 commented Jan 18, 2017

同问,events干嘛的。。

@DoranYun

@zxy1778 你好,我们最新文档请访问 weex.io,目前已经移除 events 。在旧版语法中, events 是用于指定自定义事件的。

@DoranYun

本文档已迁移至 https://weex-project.io/cn/references/advanced/extend-to-html5.html , 此处不再维护,谢谢。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment