weex端组件接入

chameleon允许在weex端多态组件中直接引入原生vue组件，一方面是为了增加代码重用度，另一方面则是方便渐进式地迁移使用chameleon。

为什么要接入weex端组件

chameleon作为跨端框架，将各端相同性及差异性进行统一封装形成chameleon的规范，但即使是这样，我们也没有办法百分百地避免差异，这样的差异可能来自产品的要求、技术的实现等等，由此chameleon提出了组件多态协议，在多态组件实现中，直接引用原生组件，降低开发成本。

怎么引入weex端组件

第一类是weex支持的原生组件，比如div text等，详细请查看weex原生组件列表，如果这样的组件已经满足开发需求，那么就可以直接使用了：

<!-- list.weex.cml -->
<template>
  <div>
    <text v-for="l in list">{{l}}</text>
  </div>
</template>

第二类是原先封装好的组件，首先你需要将组件复制到chameleon项目中，然后只需要在chameleon组件中声明式引入该组件即可使用。 还是以list组件为例，假设原有封装好的组件custom-list，目录结构如下：

<!-- index.cml -->
<template>
  <v-list></v-list>
</template>
...
<script cml-type="json">
  {
    "base": {
      "usingComponents": {
        "v-list": "/components/vue-components/v-list"
      }
    }
  }
</script>

<!-- components/vue-components/v-list.vue -->
<template>
  <ul>
    <li v-for="l in list">{{l}}</li>
  </ul>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: function() {
        return [1, 2, 3, 4]
      }
    }
  }
}
</script>

需要注意的是组件路径需要写到.vue层级，但是不带后缀。

示例

详细示例戳这里多态组件扩展