为什么这个错误不能让我异步渲染 Vue 组件？

Question

我对 Vue 很陌生，我正在尝试延迟加载一个组件，我收到了这个我不明白的错误，应该是语法错误。 这是代码：

<template>
    <div class="container">
    <h1>Async testing</h1>
    <button @click="showModal=!showModal">show modal</button>
    <Modal v-if=showModal />
    </div>
    
</template>

<script>

import { defineAsyncComponent, ref } from 'vue';
    export default {
        components: {
          Modal: () => defineAsyncComponent(
            () => import('@/components/Modal.vue')
          )
        },
        setup(){
            const showModal = ref(false);
            return {
                showModal
            }
        }
    }
    
</script>

Modal Comp 只是一个简单的 h2 和带有红色边框的 ap（我已经尝试过相同的代码，没有延迟加载，它工作正常）。 这是错误：

Answer 1

您的代码中的问题是您将组件声明为 function：

export default {
  components: {
        /* 👇 don't do this */
    Modal: () => defineAsyncComponent(() => import('@/components/Modal.vue'))
  },
}

最简单的解决方案是删除它：

export default {
  components: {
    Modal: defineAsyncComponent(() => import('@/components/Modal.vue'))
  },
}

演示

Answer 2

看起来你正在混合成分和选项 API

在<script>中尝试以下操作

import { defineAsyncComponent, ref } from 'vue';
export default {
    setup() {
        const Modal = defineAsyncComponent(() => import('@/components/Modal.vue'));
        const showModal = ref(false);
        return {
            showModal,
            Modal
        }
    }
}