业务场景：在一个高拍仪的硬件设备中，厂家给了两套不同的API，分别支持win XP 和 winXP以上版本的系统，而这两套API的实现方式截然不同，一套使用的是http通信，一套是使用scoket通信，方法的调用自然也是不同。
我需要在同一组件兼容这两套代码。这种需求下很明显，我除了修改组件里的函数方法，其他的代码基本上都不应该去动它，封装好的两套方法，只要接出封装好的函数去调用就好了。
所以得出结论
-
一个组件两套代码
-
只用修改script的代码就可以实现功能，而template和style是不需要动的
这可以用到vue的mixin功能来做到动态渲染，核心代码如下
<template>
<el-button @click="goPhoto()">拍照</el-button>
</template>
<script>
import GLOBAL from '@/config/config';
import xp from '@/mixins/xp.js';
import win7Above from '@/mixins/win7Above.js';
// 判断当前系统是否为XP
const osisxp = navigator.userAgent.indexOf('Windows NT 5.1') > -1;
export default {
// 动态判断使用的代码
mixins: [osisxp ? xp : win7Above],
}
<script>
为mixin里写的就是整套当前vue组件的代码描述了。分别对应了两份兼容代码，描述里都写着goPhoto方法，并对应着各自的实现。
别的方法
我试过用<componet>动态组件来实现上面的效果类似于这样:<component v-bind:is="currentTabComponent"></component>,过程中我用了组件透传的方法，在去用判断是否为XP的函数做判断，来判断需要展示的组件。但这样做有几个不太合理的点：
- 我不需要对模版和样式做出改动，而这个方法下我需要创建两个
.vue文件作各自的维护。 - 当使用到组件中ref引用时，我通过透传的方法，可能还需要枚举组件里使用的方法，进行嵌套，不能直接获取到目标容器的ref值