Vue - 학습 기록 앱 만들기 4 : 탭 간 전환 구현

동적 컴포넌트 및 속성 풀스루

저번에 추가한 App.vue의 더미데이터를 지우고 사용자가 직접 리소스를 입력하고, 배열에 추가하는 로직을 만들어보겠습니다.

그러려면 제목, 설명, 링크를 작성할 수 있는 입력 폼이 필요합니다.

그리고, 버튼을 만들어서 학습을 기록한 목록과 다른 화면을 전환할 수 있게 동적 컴포넌트를 만들겠습니다.

기존 App.vue에 있던 더미 데이터를 TheResources.vue 파일을 만들어 더미 데이터를 옮기고,

이 데이터와 컴포넌트를 이용해 버튼을 누르면 화면 간 전환하는 로직을 짭니다.

그리고, storedResources를 TheResource로 옮기면서 provide/inject를 써서 StoredResource에도 주입해줍니다.

그리고, 커스템 버튼에 클릭 이벤트를 쓰면 base-button의 root 요소까지 전파됩니다.

TheResources.vue

<template>  
  <base-card>  
    <base-button @click="setSelectedTab('stored-resources')">목록 보기</base-button>  
    <base-button @click="setSelectedTab('add-resource')">학습 추가</base-button>  
  </base-card>  
  <component :is="selectedTab"></component>  
</template>  

<script>  
import BaseCard from "@/components/UI/BaseCard";  
import BaseButton from "@/components/UI/BaseButton";  
import TheResources from './StoredResources.vue';  
import AddResource from './AddResource.vue';  

export default {  
  components: { BaseButton, BaseCard, TheResources, AddResource },  

  data() {  
    return {  
      selectedTab: 'stored-resources',  
      storedResources: [  
        {  
          id: 'official-guide',  
          title: 'Official Guide',  
          description: 'The Official Vue.js Documentation',  
          link: 'https://vuejs.org'  
        },  
        {  
          id: 'google',  
          title: 'Google',  
          description: 'The Official Google Documentation',  
          link: 'https://google.org'  
        },  
      ]  
    };  
  },  

  methods: {  
    setSelectedTab(tab) {  
      this.selectedTab = tab;  
    }  
  },  

  provide() {  
    return {  
      resources: this.storedResources  
    };  
  },  
}  
</script>  

<style scoped>  

</style>

이제 탭 간 전환은 완료했고 현재 선택된 탭이 어느 탭인지 구분이 안가니 탭에 강조 표시도 넣어주겠습니다.

해당 버튼이 클릭 되지 않았을 때는 기본 버튼의 색깔이 적용되고, 클릭 했을때는 강조 표시가 될 것입니다.

Computed Property를 만들어 버튼을 클릭 했을때 적용될 CSS Class를 조건을 걸어서 동적으로 바인딩합니다.

TheResource.vue

<template>  
  <base-card>  
    <base-button  
        @click="setSelectedTab('stored-resources')"  
        :mode="storedResButtonMode">목록 보기</base-button>  
    <base-button  
        @click="setSelectedTab('add-resource')"  
        :mode="addResButtonMode">학습 추가</base-button>  
  </base-card>  
  <component :is="selectedTab"></component>  
</template>

...

computed: {  
  storedResButtonMode() {  
    return this.selectedTab === 'stored-resources' ? null : 'flat';  
  },  
  addResButtonMode() {  
    return this.selectedTab === 'add-resource' ? null : 'flat';  
  }  
},

결과물