Vue3 также может использовать компоненты Vue2. Из EMP

внешний интерфейс Vue.js
Vue3 также может использовать компоненты Vue2. Из EMP

скажи это прямо

После того, как в предыдущей статье обсуждалось, какReact и Vue вызывают друг другаПосле этого мы обнаружили новые потребности.
После обновления Vue3, поскольку базовая функция рендеринга была переписана, существующие полные и полные компоненты Vue2 нельзя использовать непосредственно на Vue3. Поэтому EMP предложила решение для Vue3, позволяющее вызывать Vue2 в ответ на эту проблему, и применила его на практике, и оно оказалось выполнимым.

Итак, мы внедрили emp-vuett, HOC, который охватывает версии Vue.

Первый взгляд на демо

демонстрационная ссылка:

git clone emp,Потомyarn global add lerna && yarn && rm -rf node_modules/vue && lerna bootstrap && cd projects && dev:vue23Будут запущены следующие проекты:
Vue3-project
Vue2-base

Вызов компонентов Vue2 в Vue3

Сам компонент Vue2

использовать

Установить emp-vuett

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

Vue3 вызывает компоненты Vue2

  1. использоватьnpx @efox/emp-cli initСоздайте новый проект Vue3
  2. Выберите Vue3

3. Ввести в проект@efox/emp-vuett4. Представьте компонент Vue2 4. Создайте новый пустойdom, и присвоить идентификатор 5. Поместите компонент Vue2 и очиститеdomидентификатор передается в@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, компонент Vue2, вызываемый Vue3, должен внести следующие изменения.

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

Принцип Emp-Vuett

EMP удаленно вызывает компоненты Vue2

Вышеупомянутые компоненты Vue2 вызываются удаленно через микроинтерфейс EMP.
Чтобы вызвать компонент удаленно, вам нужно всего лишь выполнить следующие два шага в эталонном проекте и ссылочном проекте:

  1. 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
  })
})

Суммировать

  2. Используя жизненный цикл VUE3 и время выполнения VUE2, это реализует бесшовное использование компонентов Vue2 на Vue3, что значительно обогащает экологичность Vue3.

автор


Benny Shi
Ken.Xu
Категории