在 App.vue 文件里引入公共的 header 和 footer
header 和 footer 默认显示, 例如某个页面不需要显示 header
可以使用 this.$emit('header',false); 来控制 header 不显示
例如: test 页面不需要显示 header, 在页面被创建的时候广播 (this.$emit) 告诉上级不显示 header,
并且在当前页面写自己的 header 代码, 就可以了
App.vue
- "app">
- if="header_show">
- "header" v-on:footer="footer">
- if="footer_show">
- import Header from './components/header'
- import Footer from './components/footer'
- export default {
- name: 'App',
- data(){
- return {
- header_show:true,
- footer_show:true,
- }
- },
- components: {
- 'app-header':Header,
- 'app-footer':Footer,
- },
- methods:{
- // 是否显示头部
- header:function (bool) {
- this.header_show = bool;
- },
- // 是否显示底部
- footer:function (bool) {
- this.footer_show = bool;
- }
- }
- }
test.vue
- test
- export default {
- name: 'test',
- components:{
- },
- data () {
- return {
- }
- },
- created:function () {
- this.$emit('header', false);
- }
- }
header.vue
- class="header">
- head
- export default {
- name: 'app-header',
- data () {
- return {
- }
- },
- methods:{
- },
- created(){
- }
- }
footer.vue
- class="wrap" id="app-footer">
- footer
- export default {
- name: 'app-footer',
- data () {
- return {
- }
- }
- }
来源: http://www.bubuko.com/infodetail-3039630.html