vue 引入子组件报错问题

Vue组件ID规范

最新推荐文章于 2023-06-25 10:11:51 发布

原创最新推荐文章于 2023-06-25 10:11:51 发布 · 8.4k 阅读

1 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个常见的Vue开发问题：使用内置或保留的HTML元素作为组件ID。文章详细解释了错误的原因，并提供了修改方案，即将标准HTML标签更改为自定义前缀形式。

错误信息:

Do not use built-in or reserved HTML elements as component id: header

源码:

<script>
import header from "./components/header"
import aside from "./components/aside"
import footer from "./components/footer"
export default {
  name: 'layout',
  components: {
    header: header,
    aside: aside,
    footer: footer
  }
}
</script>

原因:

vue里面不允许使用 Html已有的标签作为自定义标签

修改方案:

<script>
import header from "./components/header"
import aside from "./components/aside"
import footer from "./components/footer"
export default {
  name: 'layout',
  components: {
    'v-header': header,
    'v-aside': aside,
    'v-footer': footer
  }
}
</script>

修复结果: ok