两个组件，一个被识别，另一个触发`[Vue warn]: Failed to resolve component:`警告

Question

出于某些原因，我尝试在没有 is="vue:<<component-name>>" 的情况下使用两个组件。对于背景：

• 项目是使用 Vue CLI 生成的 • 我让 Vue 即时解析 DOM 的大部分内容 • 两个组件都在SFC .vue 文件中，并且都用Vue 的defineAsyncComponent()

在入口脚本中定义

我想要的，为了方便：

<div id="app">
  <Component></Component>
  <ComponentTwo></ComponentTwo>
</div>

我运行很早就遇到了 <Component></Component> 语法的问题。这是我了解到即时编译可能需要（不那么漂亮）<div is="vue:component"></div> 语法的地方。

如果是这样就好了。它不是那么漂亮，但无论如何。处处有取舍。

但是。当我构建其他组件时，我注意到我能够摆脱 <Component></Component>。耶！惊人的。所以。我开始使用相同的模式构建下一个。那是我运行进入的时候：

[Vue warn]: Failed to resolve component: componenttwo 
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
at <App>

我对其中的区别感到困惑。我什至将 ComponentTwo 剥离为以下内容，我想也许我在 SFC 中做了一些顽皮的事情：

<template>
    <div>ComponentTwo</div>
</template>
<script>
import { ref } from "vue";
export default {
    name: "ComponentTwo",
    setup( props ) {
        const Data = ref([]);
        return { Data }; 
    }
}
</script>

没有爱。

我错过了什么？

UPDATE 出于绝望，我尝试导入已知工作组件 as <ComponentTwo> 并且它仍然以完全相同的方式失败。

UPDATE 到 UPDATE 将 <ComponentTwo> 的 name/reference 更改为“Baz”——所以 "Baz": defineAsyncComponent(() => import("./path/to/component-two.vue")) 在主视图模型的 components 注册表，以及标记中的 <Baz></Baz> — “修复”了它。问题可能是……PascalCase name？

Answer 1

它是 PascalCase 因为我正在解析 DOM。正如明确规定的在 Vue 文档中 DOM Template Parsing Caveats.

将此留在这里以防其他人正在寻求这方面的帮助。

两个组件，一个被识别，另一个触发`[Vue warn]: Failed to resolve component:`警告

Two Components, one is recognized, the other triggers the `[Vue warn]: Failed to resolve component:` warning

vuejs3