vue中一些小坑（2）
vue中app.vue中的header和footer组件不显示
好久没写vue代码，时间长了不写都是会生疏或者有些地方会忽略，就像在项目刚开始就碰到了自己注册的header和footer不显示 其实这就是我们忽略了一些问题，
其实回头看看vue的官方文档中，我们看到的都是xxxx-xxx，例如<todo-item></todo-item>，都是采用这种格式，回头看看修正后的代码
<template>
<div id="app">
<div class="header">
<my-header></my-header>
</div>
<div class="main">
<div class="tab">
i'm tab nav
</div>
<div class="article">
i;m article
</div>
</div>
<div class="footer">
<my-footer></my-footer>
</div>
</div>
</template>
<script>
import myheader from 'components/header/header';
import myfooter from 'components/footer/footer';
export default {
name: 'App',
components: {
MyHeader:myheader,
MyFooter:myfooter
}
};
</script>
<style>
@import url('common/style/base.css');
.header{
width:100%;
height:56px;
line-height:56px;
color:#444;
}
</style>错误代码
<template>
<div id="app">
<div class="header">
<header></header>
</div>
...
</div>
<div class="footer">
<footer></footer>
</div>
</div>
</template>
<script>
import header from 'components/header/header';
import footer from 'components/footer/footer';
export default {
name: 'App',
components: {
Header:header,
Footer:footer
}
};
</script>
...这样一看就知道到底是什么原因了，所以在开发中还是多按照文档中使用的代码格式， 而且header和footer是h5中的标签，自定义组件的名字使用这么html标签确实不合理，
回头想想这中错误简直愚蠢的简直了，特在此记录以告诫自己....
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018.09.19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
