Vue 无法以非常不规则的方式解析组件

Question

我有 App.vue:

<template>
  <test/>
  <test-two/>
</template>

<script>
import Test from './components/Test.vue'
import TestTwo from './components/TestTwo.vue'

export default {
  name: 'App',
  components: {
    Test,
    TestTwo
  }
}
</script>

components/Test.vue

<template>
    <test-two/>
</template>

<script>
import TestTwo from './TestTwo.vue'

export default {
    name: 'test',
    components: [
        TestTwo
    ]
}
</script>

components/TestTwo.vue

<template>
    <span>I test!!!</span>
</template>

<script>
export default {
    name: 'test-two',
}
</script>

我收到警告

[Vue warn]: Failed to resolve component: test-two 
  at <Test> 
  at <App>

但在 App.vue 中直接提及 <test-two> 似乎有效。为什么会这样？

该项目已经使用 vue-cli 搭建了新的脚手架。

Answer 1

您的 Test.vue 中存在语法错误，组件声明为数组但应为对象：

components: [
    TestTwo
]

应该是：

components: {
    TestTwo
}

Vue 无法以非常不规则的方式解析组件

Vue failing to resolve components in a very irregular way

vuejs3