说在前面

上篇文章讨论完怎么在 React 和 Vue 互相调用之后，我们发现了新的需求。
升级 Vue3 之后，因为底层的 render 函数被重写，导致 Vue2 现有丰富并完善的组件不能直接在 Vue3 上使用。因此 EMP 针对这个问题，提出了 Vue3 调用 Vue2 的方案，并且付诸实践证实可行。

所以我们实现了 emp-vuett,一个跨越 Vue 版本的 HOC。

先看 demo

demo 链接:

git clone emp ，然后 yarn global add lerna && yarn && rm -rf node_modules/vue && lerna bootstrap && cd projects && dev:vue23 将启动以下项目：
Vue3-project
Vue2-base

在 Vue3 下调用 Vue2 组件

Vue2 组件自身

使用

安装 emp-vuett

yarn add @efox/emp-vuett or npm i @efox/emp-vuett

Vue3 调用 Vue2 组件

使用 npx @efox/emp-cli init 新建一个 Vue3 项目
选择 Vue3

3. 在项目里引入 @efox/emp-vuett 4. 引入一个 Vue2 的组件 4. 新建一个空 dom ,且赋予一个 id 5. 把 Vue2 组件和空dom id传入 @efox/emp-vuett

完整代码用例：

<template>
  <div>
    <h1>VUE 3 Project</h1>
    <v3b-button />
    <!-- 为了保持加载顺序需要挂载一个空的 dom ，将 id 传给 emp-vuett-->
    <div id="content"></div>
    <conent-in-vue3
      :dataProps="num"
      :methodProps="propsFunc"
      @myEvent="emitFunc"
    />
    <v3b-content />
  </div>
</template>

<script>
import { defineAsyncComponent, render } from "vue";
// Vue2 组件
import Content from "@v2b/Content";
// Vue2 在 Vue3 运行的 HOC
import { Vue2InVue3 } from "@efox/emp-vuett";
// 让 Vue2 组件通过 emp-vuett 可以在 Vue3 上运行
// 传入 Vue2 组件和当前模板一个空div的id
const ContentInVue3 = Vue2InVue3(Content, "content");

export default {
  components: {
    "conent-in-vue3": ContentInVue3,
  },
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    // 正常传递 props 到 Vue2 组件
    propsFunc() {
      console.log("Vue3 to Vue2 Method Props");
    },
    // 可以正常在 Vue2 组件上使用 emit
    emitFunc() {
      this.num++;
    },
  },
  setup() {},
  mounted() {},
  name: "App",
};
</script>

on,props,attrs,slot 等等都可以正常使用

注意：由于 Vue3 把 $listeners 移除里，被 Vue3 调用的 Vue2 组件需要做以下调整

      // Vue2 使用 Vue3 传过来的自定义事件需要把函数名 kebab-case 改为 camelCase 再加前缀 on
      // 例如：调用 @myEvent 需要写成 onMyEvent
      // 被 Vue3 调用
      this.$emit("onMyEvent");
      // 被 Vue2 调用
      this.$emit("myEvent");

emp-vuett 原理

EMP 远程调用 Vue2 组件

上述被调用的 Vue2 组件都是通过 EMP 微前端远程调用的。
想要远程调用组件，只需要引用项目和被引用项目进行以下两步:

npm i -g @efox/emp-cli or yarn global add @efox/emp-cli

2.新建 emp-config.js,并配置（了解更多 EMP 使用，请看 EMP 系列教程）

/vue2-base/emp-config.js

const withVue2 = require('@efox/emp-vue2')
module.exports = withVue2(({config}) => {
  const projectName = 'vue2Base'
  const port = 8009
  config.output.publicPath(`http://localhost:${port}/`)
  config.devServer.port(port)
  config.plugin('mf').tap(args => {
    args[0] = {
      ...args[0],
      ...{
        name: projectName,
        library: {type: 'var', name: projectName},
        filename: 'emp.js',
        exposes: {
          './Content': './src/components/Content',
        },
        shared: ['vue/dist/vue.esm.js'],
      },
    }
    return args
  })

  config.plugin('html').tap(args => {
    args[0] = {
      ...args[0],
      ...{
        title: 'EMP Vue2 Base',
      },
    }
    return args
  })
})

/vue3-project/emp-config.js

const withFrameWork = require('@efox/emp-vue3')
module.exports = withFrameWork(({config}) => {
  const projectName = 'vue3Project'
  config.output.publicPath('http://localhost:8006/')
  config.devServer.port(8006)
  config.plugin('mf').tap(args => {
    args[0] = {
      ...args[0],
      ...{
        name: projectName,
        library: {type: 'var', name: projectName},
        filename: 'emp.js',
        remotes: {
          '@v2b': 'vue2Base',
        },
        exposes: {},
        /* shared: {
          vue: {eager: true, singleton: true, requiredVersion: '^3.0.2'},
        }, */
      },
    }
    return args
  })
  config.plugin('html').tap(args => {
    args[0] = {
      ...args[0],
      ...{
        title: 'EMP Vue3 Project',
        files: {
          js: ['http://localhost:8009/emp.js'],
        },
      },
    }
    return args
  })
})

总结

通过 EMP 的加持，远程调用 Vue2 组件，极大方便了组件的复用。
通过利用 Vue3 的生命周期和 Vue2 的 Runtime 实现了在 Vue3 上无缝使用 Vue2 组件，极大丰富了 Vue3 的生态。

作者

Benny Shi

Ken.Xu