emp-vuett
Use the
Vue2
component onVue3
to seamlessly integrateVue3
Vue2
👯
📦 Installation
yarn add @efox/emp-vuett
or
npm i @efox/emp-vuett
👨💻 Usage
Use Vue2 components in Vue3
- Create an empty element and define its id for mounting the
Vue2
component - Use
Vue2InVue3
to convertVue2
component toVue3
- Mount the component to
Vue3
<template>
<div>
<h1>VUE 3 Project</h1>
<!-- Create an empty element to mount the Vue2 component, and assign a value to the element’s id -->
<div id="content"></div>
<!-- Components from Vue 2 to Vue 3 -->
<conent-in-vue3
:dataProps="num"
:methodProps="propsFunc"
@myEvent="emitFunc"
/>
</div>
</template>
<script>
// Vue2 components Content
import Content from "@v2b/Content";
// use Vue2InVue3
import {Vue2InVue3} from "emp-vuett";
// Pass in Vue2 component and empty element id to Vue2InVue3
const ContentInVue3 = Vue2InVue3(Content, "content");
export default {
name: "App",
components: {
// Mount the converted Vue2 component
"conent-in-vue3": ContentInVue3,
},
data() {
return {
component: Content,
num: 0,
};
},
methods: {
propsFunc() {
console.log("Vue3 to Vue2 Method Props");
},
emitFunc() {
this.num++;
},
},
setup() {},
mounted() {},
};
</script>
Precautions for using Vue2 components by Vue3:
Vue2
Use the custom event passed by Vue3
to change the function name kebab-case
to camelCase
and add the prefix on
For example: calling @my-event
needs to be written as onMyEvent
The Vue2
component used above:
<template>
<div>
<div class="v2box">{{ title }}</div>
<button class="button" @click="add">Vue2 Add Button</button>
<div class="v2box">Prop: {{ dataProps }}</div>
</div>
</template>
<script>
export default {
data() {
return {
title: "Vue2 Component",
};
},
props: {
dataProps: { type: Number, required: false },
methodProps: { type: Function, required: false },
},
methods: {
add() {
// Vue2 uses the custom event passed by Vue3 to change the function name kebab-case to camelCase and add the prefix on
// For example: calling @my-event needs to be written as onMyEvent
this.$emit("onMyEvent");
},
},
mounted: function () {
this.methodProps && this.methodProps();
},
};
</script>
<style>
.v2box {
font-size: 38px;
color: green;
font-weight: bold;
}
.button {
width: 200px;
padding: 20px 0;
}
</style>