[Vue warn]: 无法解析组件，可能导入错误

Question

我使用 Vue CLI 创建了一个 Vue3 项目，并且在同一文件夹中有一个父组件（'ReactionTimer'）和一个子组件（'Block'）（'./components/'） . 我尝试将 'Block' 导入 'ReactionTimer'，但出现以下错误：
[Vue 警告]：无法解析组件：块在 ReactionTimer

ReactionTimer.vue

<template>
    <h1>Reaction Timer</h1>
    <button @click="startTimer" :disabled="isTimerOn">Play</button>
    <Block v-if="isTimerOn" :delay="delay" />
</template>

<script>
import Block from '../components/Block'


export default {
    name: 'ReactionTimer',
    components: {},
    data() {
        return {
            isTimerOn: false,
            delay: null
        }
    },
    methods: {
        startTimer() {
            this.delay = 2000 + Math.random() * 5000;
            this.isTimerOn = true
            //console.log(this.delay)
        }
    }
}
</script>

Block.vue

<template>
  <div class="block">
      click me
  </div>
</template>

<script>
export default {
    props: 'delay'
}
</script>

<style>
    .block {
        width: 400px;
        border-radius: 20px;
        background: green;
        color: aliceblue;
        text-align: center;
        padding: 100px 0;
        margin: 40px auto;
    }
</style>

我尝试了
的每一种组合从'../components/Block'
导入块从 '../components/Block.vue'
导入块从“./Block”导入块
从 './Block.vue'

导入块

Answer 1

您应该将其添加到 components 选项：

...
<script>
import Block from '../components/Block.vue'


export default {
    name: 'ReactionTimer',
    components: {Block },
...

[Vue warn]: 无法解析组件，可能导入错误

[Vue warn]: Failed to resolve component, possible import error

vue.js

import

parent-child

vuejs3