zoukankan      html  css  js  c++  java
  • VUE vue脚手架配置公用头部、底部、公共组件,控制显示隐藏的两种方式:

    1、父子组件传参: 在app.vue文件里引入公共的header 和 footer

    <template>

      <div id="app">

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

      <router-view  v-on:public_header="public_header" ></router-view>

      </div>

    </template>

    import header from './components/header/header.vue';

    export default {

      name: 'App',

      data() {

          return {header_show:true, }

        },

      methods:{

               //是否显示头部

            public_header:function (bool) {

                        this.header_show = bool;

               },

        },

        components: {

          'el-header': header,

       },

    }

    </script>

    在需要控制显示隐藏的页面里使用 this.$emit('public_header',false); 来控制header不显示

    export default {

      created() {

               this.$emit('public_header', false);

      }

    }

    2、根据页面路由判断

    页面代码:<pic v-if="picShow"></pic>  Vue Data 变量名称不用下划线

    export default {

      watch:{

                 $route(e){

                        //console.log(e.name);

                        if(e.name == 'home'){

                               this. picShow = false

                        }else{

                               this. picShow = true

                        }

       }

       //另一种获取路由写法

                 /*$route(to, from) {

                        console.log(this.$route.name);

                 }*/

           },

    }

  • 相关阅读:
    kerberos系列之zookeeper的认证配置
    kafka概念扫盲
    linux不常用命令
    linux环境安装pip
    Hbase概念原理扫盲
    python语言中三个奇妙的返回值
    python通过http(multipart/form-data)上传文件的方法
    tp5.1 模型设置了软删除,detach 不能删除中间表的问题
    tp5.1 where in 写法
    tp 5.1 使用模型查询结果集插入另一个模型的问题
  • 原文地址:https://www.cnblogs.com/haimeimei/p/13228367.html
Copyright © 2011-2022 走看看