如何在应用程序之间传递 Vue 3 中的 createApp？

Question

我正在从 Vue 2 迁移到 Vue 3。在 Vue 2 中，可以像这样全局注册一个组件：main.js

new Vue({
  el: '#app'
})

全局注册一个组件：my-component.js

Vue.component('my-component', {
  template: '<div>Hi!</div>'
})

我正在使用 Webpack 在其他组件中导入单个文件组件，然后将其捆绑在一个文件中。使用 Vue 2，这很容易，因为 Vue 实例是全局注册的。现在使用 Vue 3，由于 Vue.createApp({}).mount('#app')，它不再起作用了。我试图做这样的事情：main.js

const app = createApp({});

export const app;

并在：my-component.js

import { app } from './main.js';

app.component('my-component', {
  template: '<div>Hi!</div>'
})

最后：close-app.js

import { app } from './main.js';

app.mount('#app');

并在：index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
<script type="application/javascript" src="my-component.js"></script>
<div id="app">
    <my-component></my-component>
</div>
<script type="application/javascript" src="close-app.js"></script>

我正在导入 app 因为 Webpack。 Webpack 将其捆绑在自调用函数中，但这不起作用。我知道有一种方法可以像这样全局声明它：window.app = app;，但这不是一个好主意。有人可以帮我吗？

Answer 1

Webpack 组件

由于必须在应用程序实例上调用 Vue 3 组件注册，并且您要单独导入每个组件 Webpack，我认为您无法避免使用全局变量。在您的组件中使用全局 app 实例 (window.app) 可能是最简单的解决方案，特别是如果您想要最小化更改。

或者，您可以将组件构建为 UMD 模块，其中组件定义作为全局导出，使用 <script> 标记导入 UMD 模块（正如您已经在做的那样），然后调用 app.component() 他们每个人：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>

<!-- sets MyComponent global -->
<script type="application/javascript" src="./my-component.umd.js"></script>

<div id="app">
  <my-component></my-component>
</div>

<script>
const app = Vue.createApp({})
app.component(MyComponent.name, MyComponent)
app.mount('#app')
</script>

组件模块脚本

在 main.js 中，使用您在 <script> 标签中导入的全局 Vue 中的 createApp：

export const app = Vue.createApp({})

然后使用 <script type="module">:

将脚本作为模块导入

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
<script type="module" src="./my-component.js"></script>
<div id="app">
  <my-component></my-component>
</div>
<script type="module" src="./close-app.js"></script>

demo

如何在应用程序之间传递 Vue 3 中的 createApp？

How to pass createApp in Vue 3 among the app?

webpack

vue.js

vuejs2

vuejs3

Webpack 组件

组件模块脚本