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);

                 }*/

           },

    }

  • 相关阅读:
    HTTP协议
    javascript常用数组排序及二分查找
    垃圾回收与内存管理
    js的数据存储机制和数据类型
    js中的深复制与浅复制
    斐波那契数列的实现
    认识python中的浅复制与深复制
    微信浏览器中弹窗高度适配
    “ 时,分,秒” 活动倒计时
    互联网协议
  • 原文地址:https://www.cnblogs.com/haimeimei/p/13228367.html
Copyright © 2011-2022 走看看