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.

؟ ‍ لماذا؟

• restrative Smooth Vue 3 استراتيجية الترحيل أعيد كتابة مكوناتك بشكل تدريجي لتكون متوافقة مع 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 لمكونات 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 )
       }
   }