无法在 vue cli 应用程序中调用 Vue 组件答案

【问题标题】：Not able to call Vue component in vue cli application无法在 vue cli 应用程序中调用 Vue 组件
【发布时间】：2019-02-02 00:39:09
【问题描述】：

我正在尝试为可在多个视图中使用的 tile 创建组件。我已经调用了视图中的组件，但它不工作

组件代码（Tile.vue）

 <template>
        <div class="tile">
            <label class="title">Tile Title</label>
        </div>
    </template>

    <script>
    export default {
      name: 'CustomTile'
    }
    </script>

    <style scoped lang="less">
    .tile { width:248px;
    height: 126px;
    background-color:#e4e4e4;
        .title {
            padding-left: 15px;
        }
    }
    </style>

我试图调用上述组件的视图代码 (Report.vue)

<template>
<div>
  <div class="topnav">
  <button type="button">Expand/Collapse</button>
</div>
<div class="content">
  <CustomTile></CustomTile>
</div>
</div>
</template>

<script>
import CustomTile from '@/components/Tile.vue'
export default {
  name: 'Report'
}
</script>

<style scoped lang="less">
.topnav {
  overflow: hidden;
  background-color: #d6d6d6;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}.topnav a.active {
  background-color: #4CAF50;
  color: white;
}
.content {
  height:500px;
  width:500px;
}
</style>

CustomTile 未呈现。我无法弄清楚问题出在哪里/在哪里。

【问题讨论】：

控制台有错误吗？
不，我忘了添加“组件：{ CustomTile }”....添加后，它现在可以工作了..谢谢

标签： vue.js vuejs2 vue-component vue-cli

【解决方案1】：

需要在要使用的父组件中正确导入组件并注册：

Report.vue:

<script>
import CustomTile from '@/components/Tile.vue'
export default {
  name: 'Report',
  components: {
    CustomTile
  }
}
</script>

然后，由于CustomTile 是CamelCase 组件名称，您需要使用以下符号：

<custom-tile></custom-tile>

【讨论】：