zoukankan      html  css  js  c++  java
  • vue实现部分页面导入底部 vue配置公用头部、底部,可控制显示隐藏

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

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

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

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

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

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

    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/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;
          }
      }
    }
    </script>
    
    

    test.vue

    <template>
        <div>
            test
        </div>
    </template>
    
    <script>
        export default {
            name: 'test',
            components:{
            },
            data () {
                return {
                
                }
            },
            created:function () {
                this.$emit('header', false);
            }
        }
    </script>
    

    header.vue

    <template>
        <div class="header">
            head
        </div>
    </template>
    
    <script>
        export default {
            name: 'app-header',
            data () {
                return {
                }
            },
            methods:{
            },
            created(){
            }
        }
    </script>
    

    footer.vue

    <template>
        <div class="wrap" id="app-footer">
            footer
        </div>
    </template>
    
    <script>
        export default {
            name: 'app-footer',
            data () {
                return {
                }
            }
        }
    </script>
    

      

  • 相关阅读:
    C语言的数据、常量和变量
    C语言关键字、标识符和注释
    关于C/C++的一些讨论
    C++ 复合类型(上)
    C 函数
    C 字符输入输出和输入确认
    C++数据处理
    C控制语句:分支与跳转
    C++ 预备知识#关于C++
    范型在java中的应用
  • 原文地址:https://www.cnblogs.com/zdz8207/p/vue-header-footer-emit.html
Copyright © 2011-2022 走看看