집 >웹 프론트엔드 >JS 튜토리얼 >vue에서 구성 요소를 캡슐화하는 방법은 무엇입니까? Vue 탭 전환 구성 요소를 캡슐화하는 방법(코드 포함)

vue에서 구성 요소를 캡슐화하는 방법은 무엇입니까? Vue 탭 전환 구성 요소를 캡슐화하는 방법(코드 포함)

不言원래의: 2018-07-23 14:40:505783검색

Vue는 구성 요소를 어떻게 캡슐화하나요? Vue 캡슐화된 구성 요소의 구체적인 구현은 무엇입니까? 여기서는 Vue에서 탭 전환 구성 요소를 캡슐화하는 방법을 공유하겠습니다. 구체적인 코드 구현을 살펴보겠습니다.

요구사항

간단한 버전
탭에 해당하는 탭은 단순한 텍스트일 뿐이며 대부분 디스플레이 구성 요소에 사용됩니다.
복잡한 버전
탭에 해당하는 탭에는 테이블, 버튼, 아이콘, 양식 및 데이터 상호 작용, 상위 구성 요소와의 통신 등을 포함한 기타 요소가 포함됩니다.
성능 최적화
탭 전환 시 구성 요소를 캐시합니다.

제안

제안
상위 구성 요소는 매개 변수를 하위 구성 요소에 전달합니다.
tabList(탭 제목 목록), tabIndex(현재 탭 번호)
맞춤 이벤트
스위치 탭 이벤트
slot
콘텐츠 배포
동적 구성요소
keep-alive: 전환된 구성 요소를 메모리에 유지하면 해당 상태를 유지하거나 재렌더링을 피할 수 있습니다

complication

첫 번째 요구 사항인 경우 구성 요소를 직접 작성할 필요가 없습니다. UI 프레임워크의 기존 구성 요소 기능은 요구 사항을 완전히 충족할 수 있습니다.

두 번째 요구 사항이라면 일반적으로 완전히 적합한 UI 구성 요소가 없으며 이 예는 저의 개인적인 솔루션입니다.

탭의 공개 부분을 캡슐화합니다
탭에 해당하는 콘텐츠 영역은 슬롯 콘텐츠 배포를 사용합니다.
ajax 요청 데이터 및 기타 작업은 배포 콘텐츠 구성 요소에서 수행됩니다.
후크 기능 활성화
활성화를 통해 구성 요소가 활성화되었는지 모니터링합니다.

특정 구현

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: &#39;MyTabs&#39;,
  props:
  {
    tabList: Array,
    tabIndex: Number
  },
  data () {
    return {
    }
  },
  methods: {
    changeTab: function (tab) {
      this.$emit(&#39;changeTab&#39;, 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

다음 1개와 2개는 그냥 p 내부입니다.

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

import MyTabs from &#39;../componets/tabs.vue&#39;
import One from &#39;./one.vue&#39;
import Two from &#39;./two.vue&#39;

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

demo

tabs.png