时间戳

首页 > 解决方案 > [Vue 警告]：解析组件失败，可能导入错误

vue.js - [Vue 警告]：解析组件失败，可能导入错误

问题描述

我使用 Vue CLI 制作了一个 Vue3 项目，并且在同一个文件夹（'./components/'）中有一个父组件（'ReactionTimer'）和一个子组件（'Block'）。我尝试将“Block”导入“ReactionTimer”，但出现以下错误：
[Vue warn]: Failed to resolve component: Block at 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>

块.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>

我尝试了
import Block from '../components/Block'
import Block from '../components/Block.vue'
import Block from './Block'
import Block from './Block.vue' 的每种组合

标签： vue.jsimportparent-childvuejs3

解决方案

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

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


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

推荐阅读