vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏

vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏

在app.vue文件里引入公共的header 和 footer

header 和 footer 默认显示，例如某个页面不需要显示header

可以使用 this.$emit('header',false); 来控制header不显示

例如：test页面不需要显示header，在页面被创建的时候广播(this.$emit)告诉上级不显示header，

并且在当前页面写自己的header代码，就可以了

header.vue(公共头文件)

<template>

    <div class="header" id="appHeader">

        公共头部

    </div>

</template>



<script>

    export default {

        name: 'appHeader',

        data () {

            return {

            }

        },

        methods:{

        },

        created(){

        }

    }

</script>

footer.vue(公共底部文件)

<template>

    <div class="wrap" id="appFooter">

        公共底部

    </div>

</template>



<script>

    export default {

        name: 'appFooter',

        data () {

            return {

            }

        }

    }

</script>

app.vue (公共头部与底部放置的文件) 

app.vue

<template>

  <div id="app">

    <app-header v-if="header_show"></app-header>

    <router-view v-on:header="header" v-on:footer="footer"></router-view>

    <app-footer v-if="footer_show"></app-footer>

  </div>

</template>



<script>

import Header from './components/appHeader'

import Footer from './components/appFooter'

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;

      }

  }

}

</script>

 index.vue(使用公共头部跟底部的文件)

<template>

    <div>

        test

    </div>

</template>



<script>

    export default {

        name: 'test',

        components:{

        },

        data () {

            return {

             

            }

        },

        created:function () {

            this.$emit('header', false);
            this.$emit('footer', true);

        }

    }

</script>

原文地址（如有侵权，联系删除）：vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏 - 大自然的流风 - 博客园