如何使用自定义头部组件的自定义方法

哈喽啊友友们

今天来给大家分享一下 如何在项目里面使用自定义的头部组件

干货干货，不唠嗑，不浪费瓜子

首先 我们先封装好自定义组件

<template>
  <nav id="myheader" ref="myheader">
    <section @click="back" class="back-container">
      <i class="backIcon fl" v-show="backStatus"></i>
    </section>
    <slot></slot>
    <section class="right" @click="preview">
      <i class="rightText" v-show="rightText">{{rightText}}</i>
    </section>
  </nav>
</template>

<script>
  import * as Cookies from 'tiny-cookie'
  export default {
    name: "myheader",
    props: ['backUrl', 'currentUrl', 'backStatus', 'selfFn', 'rightText', 'previewQuestin', 'preserve'],
    data() {
      return {}
    },
    methods: {
    //判断 如何我们使用自定意事件了的话，就走this.selfFn如果没用自定义事件的话，就走backurl这个方法或者默认的返回上一页
      back: function () {
        if (this.selfFn) {
          this.selfFn();
        } else {
          if (this.backUrl) {
            if(this.backUrl == '/index' || this.backUrl == '/integrateService'){
              let n = Cookies.get('ieBackUrl') ? Cookies.get('ieBackUrl') : localStorage.getItem('ieBackUrl')
              if(n){
                this.$router.push({path: n});
              }else{
                this.$router.push({path: this.backUrl});
              }
            }else{
              this.$router.push({path: this.backUrl});
            }
          } else {
            this.$router.back()
          }
        }
      },
      preview() {
        this.$emit('sopreviewQuestin')
      }
    },
    updated() {
    },
    created() {
      let ths = this;
      window.goBackForAndroid = function () {
        ths.back();
      }

    }
  }
</script>

<style type="text/scss" lang="scss">
  #myheader {
    height: rem(88);
    width: 100%;
    line-height: rem(88);
    font-size: rem(34);
    font-weight: bold;
    background: #fff;
    background-size: 100% rem(88);
    color: #333;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    .back-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 20%;
      height: 100%;
      .backIcon {
        width: rem(22);
        height: rem(38);
        background: url("../assets/images/back-b.png") no-repeat;
        background-size: rem(22) rem(38);
        display: inline-block;
        position: absolute;
        top: rem(24);
        left: rem(24);
      }

    }
    .right {
      display: inline-block;
      position: absolute;
      right: rem(24);
      .rightText {
        font-size: rem(30);
        font-family: PingFang SC;
        font-weight: 600;
        color: rgba(0, 0, 48, 1);
      }
      img{
        width: rem(66);
        margin-top: rem(10);
      }
    }

  }
</style>

然后我们在页面中如何使用哪？
第一步：把组件引进来

  import vHeader from "@/components/header.vue";

第二步：给组件放在components里面

  components: {vHeader},

第三步：在页面使用

//: :selfFn="selfFns"  自定义方法名
  <v-header backUrl="" :backStatus="true"  :selfFn="selfFns"> 福利详情</v-header>

第四步：在方法里面调用该方法就好了