vue怎麼封裝組件？ vue tab切換元件封裝的方法（附程式碼）

Vue怎麼封裝元件？ Vue封裝元件的具體實作是怎樣的？這裡我就跟大家分享一下vue中tab切換元件如何封裝，下面我們就來看看具體的程式碼實作。

需求

1. 簡易版
   tab對應的選項卡只是普通文本，多用於展示性組件。

2. 複雜版
   tab對應的選項卡包括表格，按鈕，圖標，表單等多種元素，包括資料互動、與父組件的通訊等。

3. 效能最佳化
   切換tab時，快取組件。

方案

• Prop
  父元件向子元件傳遞參數。
  tabList(tabs標題清單)、tabIndex(目前的tab序號)

• #自訂事件
  切換tab事件

• slot
  內容分發

• 動態元件
  keep-alive：如果把切換出去的元件保留在記憶體中，可以保留它的狀態或避免重新渲染

複雜化

如果是第一種需求，可以不必自己寫元件，UI框架中現有的功能完全可以滿足需求。

如果是第二種需求，一般沒有完全合適的UI元件，而本例是我個人的一種解決方案。

• 封裝tabs公共部分

• tab對應的內容區域使用slot內容散佈

• ##ajax請求資料等操作是在分發內容組件中執行的。

• 鉤子函數activated

  透過activated監聽組件是否啟動。
  

具體實作

template

  <p class="my-tabs">
    <p class="tabs-bar">
      <p class="tabs-bar-nav">
        <p class="tabs-tab" v-for="tab in tabList"
        :class="[tabIndex == tab.index ? &#39;tabs-active&#39; : &#39;&#39;]"
        @click="changeTab(tab)">
          {{tab.name}}
        </p>
      </p>
    </p>
    <p class="tabs-content">
      <slot></slot>
    </p>
  </p>

script

  export default {
  name: 'MyTabs',
  props:
  {
    tabList: Array,
    tabIndex: Number
  },
  data () {
    return {
    }
  },
  methods: {
    changeTab: function (tab) {
      this.$emit('changeTab', tab)
    }
  }
}

style

  <style scoped lang="scss">
.my-tabs {
  font-size: 14px;
  color: #444;
}
 .tabs-bar {
   border-bottom: 1px solid #eee;
   position: relative;
   padding: 5px 0;
 }
 .tabs-bar-nav {
   display: table;
   margin-left: 35px;
   position: absolute;
   bottom: -1px;
 }
 .tabs-tab {
   min-width: 110px;
   padding: 5px 0;
   position: relative;
   display: inline-block;
   text-align: center;
   cursor: pointer;
 }
 .tabs-active {
   border-top: 1px solid pink;
   border-left: 1px solid pink;
   border-right: 1px solid pink;
   border-bottom: 1px solid #fff;
 }
 .tabs-content {
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 30px;
 }
</style>

引用

#以下one,two內部只是一個p。

  <!-- Tabs -->
    <my-tabs :tabList="tabList" :tabIndex="tabIndex" @changeTab="changeTab">
      <keep-alive>
        <component :is="currentContent">
        </component>
      </keep-alive>
    </my-tabs>

import MyTabs from '../componets/tabs.vue'
import One from './one.vue'
import Two from './two.vue'

export default {
  name: 'Home',
  components: {
    MyTabs,
    'one': One,
    'two': Two
  },
  data () {
    return {
      tabIndex: 0,
      currentContent: 'one',
      tabList: [
        {
          index: 0,
          name: '选项一',
          component: 'one'
        },
        {
          index: 1,
          name: '选项二',
          component: 'two'
        }
      ]
    }
  },
  methods: {
     // 切换选项卡
    changeTab: function (tab) {
      this.tabIndex = tab.index
      this.currentContent = tab.component
    }
  }
}

demo

tabs.png

 相關建議：

Jquery封裝tab自動切換效果的具體實作_jquery

Tab切換元件（選項卡功能）實例程式碼_jquery

####

以上是vue怎麼封裝組件？ vue tab切換元件封裝的方法（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！