Vue组件仅渲染元素名称而非模板内容问题求助

嘿，这确实是个很容易忽略的小细节！你已经正确导入了GalleryCollectionBlueBottles组件，但忘记在当前组件的components选项里注册它了——这就是浏览器只显示组件名称标签，而非实际内容的核心原因。

修复步骤： #

只需要在export default中添加components对象，把导入的组件注册进去就行：

<template>
  <div>
    <GalleryCollectionBlueBottles />
  </div>
</template>

<script>
import GalleryCollectionBlueBottles from '@/components/collections/GalleryCollectionBlueBottles.vue'

export default {
  name: 'GalleryCollections',
  // 新增这部分，注册组件
  components: {
    GalleryCollectionBlueBottles
  }
}
</script>

为什么要这么做？ #

Vue需要明确知道哪些组件可以在当前模板中使用，必须通过components选项完成注册，它才会识别这个自定义标签，并渲染对应组件的模板内容。如果不注册，浏览器会把它当成普通的HTML自定义元素处理，自然不会显示组件内容。

额外检查点（以防万一）： #

• 确认@/components/collections/GalleryCollectionBlueBottles.vue的文件路径是正确的，@在Vue项目中默认指向src目录，所以要保证这个组件文件确实放在src/components/collections/下。
• 检查GalleryCollectionBlueBottles.vue自身的代码有没有语法错误，比如模板是否闭合、script部分是否正确导出等。

内容的提问来源于stack exchange，提问作者Tony Merryfield