vue.js - 无法在 vue cli 应用程序中调用 Vue 组件
问题描述
我正在尝试为可在多个视图中使用的 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 未呈现。我无法弄清楚问题出在哪里/在哪里。
解决方案
您需要在要使用它的父组件中正确导入组件并注册它:
Report.vue:
<script>
import CustomTile from '@/components/Tile.vue'
export default {
name: 'Report',
components: {
CustomTile
}
}
</script>
然后,由于CustomTile
是 CamelCase 组件名称,您需要使用以下符号:
<custom-tile></custom-tile>
推荐阅读
- javascript - 奇怪的行为:显示 vue-multiselect 选项面板导致按钮无法点击
- c# - 从谷歌驱动器下载文件时如何解决 Google.Apis.Download.DownloadStatus.Failed 的情况
- reactjs - 我应该为我的整个应用程序使用动态导入吗?
- javascript - 由于未定义的上下文而获取 TypeError
- excel - 运行时错误 91:即使我根本没有更改我的代码,也没有设置对象变量或带有块变量
- java - Java 控制台(来自配置 Java)不输出我的任何 System.out.println
- c# - 有人可以告诉我如何将文件包含在 dot net core 的多项目模板中吗?
- python - 基于多列的分箱(分类值)的最佳方法
- amazon-cloudformation - c# aws api gateway serverless.template 结构不通过 CloudFormation 处理
- c++ - C++ 奇怪的模板/命名空间行为