组件封装(Composed Component) #2

Open
miaojing opened this Issue Jun 12, 2016 · 17 comments

Projects

None yet
@miaojing
miaojing commented Jun 12, 2016 edited

组件封装

经常我们会发现很多可复用的 weex 文件,这时候可以封装成 weex 组件。我们可以直接创建一个名为foo.we的文件,<foo>就是组件名。

<!-- foo.we -->
<template>
  <container style="flex-direction: row;">
    <image src="{{image}}"></image>
    <text>{{title}}</text>
  </container>
</template>
<script>
  module.exports = {
    data: {
      title: null,
      image: null
    }
  }
</script>

foo.we 的也包含 <template><style><script>,定义好了后,直接用<foo>标签即可, 注意这里bar.wefoo.we是在同目录下哦,如下:

<!-- bar.we -->
<template>
  <foo title="..." image="..."></foo>
</template>

组件嵌套

封装好的组件也支持嵌套,如下:

<!-- somepath/foo.we -->
<template>
  <container style="flex-direction: row;">
    <image src="{{image}}"></image>
    <text>{{title}}</text>
  </container>
</template>
<script>
  module.exports = {
    data: {
      // 这几个 key 必须明确写好,不论是上层数据传递下来还是内部修改数据才会被正常监听
      title: null,
      image: null
    }
  }
</script>
<!-- somepath/foo.list.we -->
<template>
  <container>
    <text>{{description}}</text>
    <foo repeat="{{list}}" title="{{text}}" image="{{img}}"></foo>
  </container>
</template>
<script>
  module.exports = {
    data: {
      description: '',
      // 因为上层组件会通过 list 向下传递数据,所以这里需要把字段明确写好
      list: []
    }
  }
</script>
<!-- somepath/main.we -->
<template>
  <foo-list list="{{list}}"></foo-list>
</template>
<script>
  module.exports = {
    data: {
      list: [
        {text: '...', img: '...'},
        {text: '...', img: '...'},
        {text: '...', img: '...'},
        ...
      ]
    }
  }
</script>

main.we嵌套了<foo-list>, <foo-list>嵌套了<foo>

注意事项

  • 每个封装好的组件都有一个独立的<style>
  • 如果子组件有 id 属性,可以通过this.$vm(id)来访问子组件的上下文,并可以通过this.$el(id)来找节点。更多详见【如何找节点
  • 更多模块间通信问题可以参考【 组件间如何通信
  • 只有在 data 选项中明确写明的 key 才会被数据监听,不论是基于上层数据传递下来的场景还是内部修改数据的时候

下一篇:如何找节点

@miaojing miaojing changed the title from 封装组件(Composed Component) to 文档翻译 - 封装组件(Composed Component) Jun 12, 2016
@marchFantasy

英文版本里有:this.$el(id)。访问element元素

@miaojing miaojing changed the title from 文档翻译 - 封装组件(Composed Component) to 文档翻译 - 模块封装(Composed Component) Jun 16, 2016
@SeptemberMaples

英文版里创建组件没有用 <we-element name="xxx"></we-element>来声明组件的名字,是不是用文档的名字也能直接定义组件名字?

@miaojing

@marchFantasy @SeptemberMaples 多谢指出,已经基于当前最新版的文档更新~
@SeptemberMaples 是的,可以直接用文档的名字直接定义组件名字

@miaojing miaojing changed the title from 文档翻译 - 模块封装(Composed Component) to 文档翻译 - 组件封装(Composed Component) Jun 24, 2016
@miaojing miaojing changed the title from 文档翻译 - 组件封装(Composed Component) to 组件封装(Composed Component) Jun 24, 2016
@wengyuxiang

main传递给foo-list的是prop属性吧,foo-list内部props不用做映射?

@caofuwei

那个注意事项里面“组件间如何通信”跳转是错的。

@mrKylinZhou

第二个例子多层嵌套为什么显示不出来

@l4Carol
l4Carol commented Aug 25, 2016

foo.we暴露出供foo-list.we调用的属性(title image)只支持小写敏感
如果foo.we中image属性名改为imageUrl foo-list.we中调用处相应改成imageUrl 也无法传递属性
需将foo.we中imageUrl 改为 imageurl

@zhuxinfei

照着示例代码打了一遍没法运行,cmd框框里报错怎么回事 除了第一个.we文件,后面两个都不能打开

@DemoPan
DemoPan commented Aug 30, 2016
应该是 ,这样就不会有问题了。
@wang111588

注意这里bar.we和foo.we是在同目录下哦
--要是不在一个目录下怎么处理?

@xuepeng28

属性传递并不存在大小写敏感的问题 采用驼峰定义变量,如imageUrl,在传入属性时,应该按照语法规定的分割线方式,即iamge-url。这是约定

@RaulZuo
RaulZuo commented Nov 5, 2016 edited

父组件能否定义子组件的style,例如中的标签中定义中的组件的样式?因为套用组件的时候需要定义不同的height、background-color这样的样式

@liujinjiaer

@mrKylinZhou 注意设置大小,第二个例子能跑出来

@DoranYun
DoranYun commented Dec 9, 2016

@SeptemberMaples 是的,如果是同级目录下,可以直接使用文件名。

@DoranYun
DoranYun commented Dec 9, 2016

@caofuwei 新版文档已经在整理,可查看 https://alibaba.github.io/weex/cn/doc/

@DoranYun
DoranYun commented Dec 9, 2016

@zhuxinfei
这篇文档比较旧了,试试新版文档的例子 https://alibaba.github.io/weex/cn/doc/syntax/composed-component.html

@DoranYun
DoranYun commented Dec 9, 2016

@RaulZuo 父组件和子组件的样式不会串扰。所以无法在父组件中定义子组件的样式

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