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标签确实不合理,
回头想想这中错误简直愚蠢的简直了,特在此记录以告诫自己....