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