vue 2 3

Vue-2-3

Komponen Interop Vue 2 dengan Aplikasi Vue 3 dan sebaliknya!

 < 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 >

Berikut adalah demo codepen menggunakan komponen Vue 2 di aplikasi Vue 3.

? ‍♂️ Mengapa?

• ⛵️ Smooth Vue 3 Strategi Migrasi secara bertahap tulis ulang komponen Anda menjadi Vue 3 yang kompatibel!
• Perluas ekosistem Vue 2 dan 3 Tap ke ekosistem VAt Vue 2 dari aplikasi Vue 3 Anda dan sebaliknya!

Memasang

npm i vue-2-3

? Pengaturan Cepat

1. Impor vue-2-3/to-vue-2 atau vue-2-3/to-vue-3 .

   • Gunakan toVue2 untuk menginteropasikan komponen Vue 3 dengan aplikasi Vue 2

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

   • Gunakan toVue3 untuk menginteropasikan komponen Vue 2 dengan aplikasi Vue 3

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

2. Ini akan secara otomatis mencoba menyelesaikan Vue 2 & 3 melalui penentu telanjang vue dan vue3 tetapi jika tidak dapat menemukannya, Anda dapat mendaftarkannya secara manual. Anda hanya perlu melakukan ini sekali jadi disarankan untuk dilakukan di bagian atas aplikasi Anda.

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

   Untuk VUE 3, Anda dapat memberikan ekspor yang diperlukan createApp dan h untuk menjaga dependensi seminimal mungkin:

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

3. Lewati komponen dan mulailah menggunakannya!

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