weex端组件接入

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

为什么要接入weex端组件

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

怎么引入weex端组件

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

  1. <!-- list.weex.cml -->
  2. <template>
  3.   <div>
  4.     <text v-for="l in list">{{l}}</text>
  5.   </div>
  6. </template>

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

  1. <!-- index.cml -->
  2. <template>
  3.   <v-list></v-list>
  4. </template>
  5. ...
  6. <script cml-type="json">
  7.   {
  8.     "base": {
  9.       "usingComponents": {
  10.         "v-list": "/components/vue-components/v-list"
  11.       }
  12.     }
  13.   }
  14. </script>
  1. <!-- components/vue-components/v-list.vue -->
  2. <template>
  3.   <ul>
  4.     <li v-for="l in list">{{l}}</li>
  5.   </ul>
  6. </template>
  7. <script>
  8. export default {
  9.   props: {
  10.     list: {
  11.       type: Array,
  12.       default: function() {
  13.         return [1, 2, 3, 4]
  14.       }
  15.     }
  16.   }
  17. }
  18. </script>
需要注意的是组件路径需要写到.vue层级，但是不带后缀。

示例

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