经常我们会发现很多可复用的 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.we和foo.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 才会被数据监听，不论是基于上层数据传递下来的场景还是内部修改数据的时候
