web端组件接入

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

为什么要接入web端组件

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

怎么引入web端组件

在chameleon中使用组件只需要在组件配置中写入依赖的子组件，下面是web端组件引用vue单文件组件的示例：

  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层级，但是不带后缀。

示例

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