vue 2 3

Vue-2-3

ส่วนประกอบ Interop Vue 2 พร้อมแอพ Vue 3 และในทางกลับกัน!

 < template >
    I'm a Vue 3 app... but I can use Vue 2 components!

    < some-vue2-component />
</ template >

< script >
import SomeVue2Component from 'some-vue2-component'
import toVue3 from 'vue-2-3/to-vue-3'

export default {
    components : {
        SomeVue2Component : toVue3 ( SomeVue2Component )
    }
}
</ script >

นี่คือการสาธิต codepen โดยใช้ส่วนประกอบ Vue 2 ในแอพ Vue 3

? ‍♂ ทำไม?

• ⛵กลยุทธ์การโยกย้าย Vue 3 Smooth Migration เพิ่มการเขียนส่วนประกอบของคุณใหม่เพื่อให้เข้ากันได้กับ Vue 3!
• ขยายระบบนิเวศ VUE 2 และ 3 เข้าสู่ระบบนิเวศ VUE 2 อันกว้างใหญ่จากแอพ Vue 3 ของคุณและในทางกลับกัน!

ติดตั้ง

npm i vue-2-3

- การตั้งค่าอย่างรวดเร็ว

1. นำเข้า vue-2-3/to-vue-2 หรือ vue-2-3/to-vue-3

   • ใช้ toVue2 เพื่อ interop vue 3 ส่วนประกอบกับแอพ Vue 2

      import toVue2 from 'vue-2-3/to-vue-2' ;

   • ใช้ toVue3 เพื่อ interop vue 2 ส่วนประกอบกับแอพ Vue 3

      import toVue3 from 'vue-2-3/to-vue-3' ;

2. มันจะพยายามแก้ไข Vue 2 & 3 โดยอัตโนมัติผ่านตัวระบุเปลือย vue และ vue3 แต่ถ้าไม่พบพวกเขาคุณสามารถลงทะเบียนได้ด้วยตนเอง คุณต้องทำสิ่งนี้เพียงครั้งเดียวดังนั้นจึงแนะนำให้ทำที่ด้านบนสุดของแอปของคุณ

    import Vue2 from 'vue2' ;
   import * as Vue3 from 'vue@next' ;
   
   toVue2 . register ( Vue2 , Vue3 ) ;

   สำหรับ Vue 3 คุณสามารถให้การส่งออกที่จำเป็น createApp และ h เพื่อให้การพึ่งพาน้อยที่สุด:

    import { createApp , h } from 'vue@next' ;
   
   toVue2 . register ( { createApp , h } ) ;

3. ผ่านส่วนประกอบและเริ่มใช้มัน!

    import SomeVue2Component from './some-vue2-component' ;
   
   export default {
       components : {
           SomeVue2Component : toVue3 ( SomeVue2Component )
       }
   }