How to encapsulate components in vue? How to encapsulate vue tab switching components (with code)

How does Vue encapsulate components? What is the specific implementation of Vue encapsulated components? Here I will share with you how to encapsulate the tab switching component in Vue. Let's take a look at the specific code implementation.

Requirements

1. Simplified Version
   The tab corresponding to tab is just ordinary text and is mostly used for display components.

2. Complex version
   The tab corresponding to tab includes tables, buttons, icons, forms and other elements, including data interaction, communication with parent components, etc.

3. Performance Optimization
   Cache components when switching tabs.

Proposal

• Prop
  Parent component passes parameters to child component.
  tabList (tabs title list), tabIndex (current tab number)

• Custom events
  Switch tab event

• slot
  Content distribution

• Dynamic components
  keep-alive: If you keep the switched component in memory, you can retain its state or avoid re-rendering

Complication

If it is the first requirement , you don’t have to write components yourself, the existing functions in the UI framework can fully meet your needs.

If it is the second requirement, there is generally no completely suitable UI component, and this example is my personal solution.

• Encapsulate the public part of tabs

• The content area corresponding to the tab uses slot content distribution

• ajax Operations such as requesting data are performed in the distribution content component.

• Hook function activated
  Monitor whether the component is activated through activated.

Specific implementation

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>

Quote

The following one and two are just p inside.

  <!-- 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

Related recommendations:

Jquery encapsulates tab automatic switching effect Specific implementation_jquery

Tab switching component (tab function) example code_jquery

The above is the detailed content of How to encapsulate components in vue? How to encapsulate vue tab switching components (with code). For more information, please follow other related articles on the PHP Chinese website!