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

示例

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