单独文件中的 Vue3 组件

Question

我有一个应用程序要从 Vue2 移植到 Vue3。我没有使用捆绑器，因为 Vue 只是在页面上提供简单的交互。这是 Vue2 中的简化版本：

// my-modal.js
var myModal = Vue.component('my-modal',
{
    template:
        `<div id="myModal">
        <button @click.prevent="open=true">Open Modal</button>

        <div v-if="open" class="my-modal">
            <p>Hello from the modal!</p>
            <button @click.prevent="open=false">Close</button>
        </div>
    </div>`,
    data() {
        return {
            open: false
        }
     }
})

在 Vue 2 中这是可行的；

<script src="https://unpkg.com/vue@2"></script>

<div id="app">
    <div class="outer">
        <h3>Modal Example - {{ message }}</h3>
        <div>
            <my-modal />
        </div>
    </div>
</div>

<script src="/js/my-modal.js"></script>

<script>
   const app = new Vue(
   {
       el: '#app',
       data() {
           return {
               message: 'Hello Vue!'
           }
       }
   });
</script>

对于 Vue3，根据文档位于：https://v3-migration.vuejs.org/breaking-changes/global-api.html#a-new-global-api-createapp

<script src="https://unpkg.com/vue@3"></script>

<div id="app">
    <div class="outer">
        <h3>Modal Example - {{ message }}</h3>
        <div>
            <my-modal />
        </div>
    </div>
</div>

<script src="/js/my-modal.js"></script>

<script>
   Vue.createApp({
      data()
      {
          return {
              message: 'Hello Vue!'
          }
      }
   }).mount('#app')
</script>

并且在 my-modal.js 文件中，我更改了前几行以使用 Global Vue：

 const { createApp } = Vue;
 const app = createApp({});

 app.component('my-modal', ...

Vue 实例有效，但找不到组件并显示错误消息：“无法解析组件：my-modal”。我尝试将 'components' 部分添加到 Vue 实例和其他一些没有运气的东西。

有什么建议吗？

Answer 1

来自 createApp() 的每个实例都是 唯一的 。也就是说，在 index.html 中调用 createApp() 不会 return 与之前在 my-modal.js 中调用的实例相同。

一个解决方案是在导入my-modal.js:

之前声明全局app实例
 <script> window._app = Vue.createApp({⋯}) </script> <script src="/js/my-modal.js"></script> <script> // finally mount window._app.mount('#app') </script>

// js/my-modal.js window._app.component('my-modal', {⋯})

demo

单独文件中的 Vue3 组件

Vue3 Components in a Separate File

vue.js

vue-component

vuejs3