由于某些原因,我尝试在没有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
简化为以下内容,认为我可能在证监会内部做了一些顽皮的事情:
<template>
<div>ComponentTwo</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "ComponentTwo",
setup( props ) {
const Data = ref([]);
return { Data };
}
}
</script>
没有爱。
我错过了什么?
UPDATE出于绝望,我尝试将已知的工作组件导入为<ComponentTwo>
,但它仍然以完全相同的方式失败。
更新到更新将<ComponentTwo>
的名称/引用更改为";Baz"——所以主视图模型的components
注册表中的"Baz": defineAsyncComponent(() => import("./path/to/component-two.vue"))
和标记中的<Baz></Baz>
——";固定的";PascalCase的名字会是问题吗?
这是PascalCase,因为我正在解析DOM。如明确规定在Vue Docs DOM模板解析注意事项中。
把这个留在这里,以防其他人正在寻求帮助。