uniapp封裝 自定義tab欄封裝

   因爲在工做時一個項目中會用到不少tab欄   這個時候能夠本身封裝一個反覆使用 ！  

    先將tab中的選項文字 在data中定義 渲染在 <view></view>中

以下👇！tabTop 就是我在data中定義的數組

<template>
    <view class="tabtop">
    <view 
    v-for="(item,index) in tabTop" 渲染傳過來的tabT
    :key="index" 
    :class="tabTopIndex==index?'tabTop_tx':'sel_text'"  //這是三目運算符 決定點擊先後的樣式 樣式能夠本身定義
    @click="onToptab(index)" 
  >{{item}}</view>
    </view>
</template>

而後在methods中 編輯點擊事件切換（藍色文字是我定義的放法，在方法中傳index）

<script>
    export default{
        data(){
            return{
                tabTopIndex:0, （這是我定義的一個值 他就等於參數E，不太懂的話能夠打印一下E）
            }
        },
        props: {
                tabTop: Array,//這是接收父頁面傳來的tab內容的數組 
        },
        methods: {
            onToptab(e) {
                this.tabTopIndex=e
                this.$emit('orderTap',{e})  //我要把這個方法傳給須要使用這個tab的頁面！！！
            },
        },
    }
</script>

接下來 就要在頁面中使用這個組件

先引入進來   
     import underway from "@/components/order/orderStatus/underway.vue"
    export default{
        components: {
            tabBar,
            underway
        },

而後在頁面中使用

 <!-- tab切換欄 -->
         <view class="order_tab">
               <tabBar @orderTap="orderTap" :tabTop="tabTop"></tabBar>（@orderTap="orderTap"是剛剛在組件中定義傳過來的方法 在父頁面中使用！！！）（：tabTop="tabTop"則是在data（）中定義的tab數組傳給子組件以下！！！）
         </view>

data(){
            return{
                orderStatus:0,
                tabIndex:'',
                tabTop:['進行中','預定單','已完成','已取消']//這是個人tab內容定義的數組
            }
        },

接下來 在methods 中 編輯傳過來的tab點擊事件就好啦！以下！！！ // e是指even，指的是事件，onclick="XXX(even)"

    methods: {             orderTap(e){                 console.log(e)                 this.tabIndex=e.e                 console.log(this.tabIndex)             }         },