vue 2.0 동적 구성 요 소 를 사용 하여 Tab 탭 전환 효과 구현(vue-cli)

vue 에서 Tab 전환 을 실현 하 는 데 는 주로 세 가지 방식 이 있 습 니 다.동적 구성 요 소 를 사용 하고 vue-router 경 로 를 사용 하 며 제3자 플러그 인 을 사용 합 니 다.
이번에 완 성 된 기능 은 구성 요 소 를 간단하게 전환 하 는 것 일 뿐 이 고 경로 전환 을 사용 하려 면 주 소 를 바 꾸 는 것 이 약간 번 거 로 우 므 로 동적 구성 요 소 를 사용 하여 이 루어 집 니 다.대형 응용 프로그램 이 라면 vue-router 를 사용 하 는 것 이 편리 할 수 있 습 니 다.
먼저 최종 적 으로 실 현 된 효 과 를 살 펴 보고 구조 가 비교적 간단 하 며 상단 의 세 개의 Tab 라벨 은 전환 에 사용 되 며 내용 구역 은 각각 세 개의 키 구성 요소 입 니 다.

효과 미리 보기
핵심 코드 및 분석 은 다음 과 같다.

<template>
//     tab          ，         tab      
<div class="tabs">
 <div class="tab" @click="toggleTab('prince')"><a>   </a></div>
 <div class="tab" @click="toggleTab('rose')"><a>   </a></div>
 <div class="tab" @click="toggleTab('fox')"><a>   </a></div>
</div>
//    ，      tab
// is          
// keep-alive               
<prince :is="currentTab" keep-alive></prince>
</template>

<script>
//      
import prince from './components/prince';
import rose from './components/rose';
import fox from './components/fox';
export default {
 name: 'app',
 data () {
  return {
   currentTab: 'prince' // currentTab             
  };
 },
 components: { //      
  prince,
  rose,
  fox
 },
 methods: {
  toggleTab: function(tab) {
   this.currentTab = tab; // tab             
  }
 }
}
</script>

동적 구성 요 소 를 사용 하여 Tab 탭 전환 을 실현 하 는 기본 과정 은 다음 과 같 습 니 다.
4

부모 구성 요소 에서 메 인 tab 탭 페이지 를 정의 합 니 다.전환 하 는 동시에 모든 tab 바 인 딩 클릭 이벤트 에 이 tab 의 하위 구성 요소 이름 을 입력 하고 마지막 으로 하위 구성 요 소 를 도입 하고 정의 합 니 다

4

하위 구성 요소 중 각 tab 탭 의 내용 입 니 다

is 특성 동적 전환 서브 구성 요 소 를 사용 하고 kee-alive 캐 시 를 사용 합 니 다is 기능 은 일반적으로 원생 HTML 요소 확장 에 사 용 됩 니 다.
밤 을 들 어 라.보통 l 태그 에 li 태그 만 끼 워 넣 을 수 있 지만,우 리 는 지금 l 태그 에 사용자 정의 구성 요소 v-li 를 사용 하고 싶다.

<ul>
  <v-li></v-li>
</ul>

이렇게 쓰 면 안 될 것 입 니 다.이 는 is 특성 을 사용 해 야 합 니 다.

<ul>
  <li is="v-li"></li>
</ul>

이것 이 바로 is 특성 을 이용 하여 동적 전환 구성 요소 의 효 과 를 실현 할 수 있 는 이유 이다.
keep-alive 명령 은 전 환 된 구성 요 소 를 메모리 에 저장 할 수 있 으 며,상 태 를 유지 하거나 다시 렌 더 링 을 피 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.