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 >

這是使用VUE 3應用程序中的VUE 2組件的Codepen演示。

？ ‍♂️為什麼？

• ⛵️流暢的VUE 3遷移策略會逐步改寫您的組件為VUE 3兼容！
• 將VUE 2和3生態系統擴展到您的VUE 3應用程序，反之亦然！

安裝

npm i vue-2-3

？快速設置

1. 導入vue-2-3/to-vue-2或vue-2-3/to-vue-3 。

   • 使用toVue2與VUE 2應用程序互化3個組件

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

   • 使用toVue3與VUE 3應用程序互動VUE 2組件

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

2. 它將自動嘗試通過Bare Specifiers vue和vue3解析VUE 2和3，但是如果找不到它們，則可以手動註冊它們。您只需要一次執行此操作，因此建議您在應用程序的頂部完成。

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