[Udemy Vue 완벽가이드 Section16] 241. 코치 목록 및 목록 항목 작성하기

코치 항목을 위해 별개의 컴포넌트를 사용할거다.

이 항목과 관련된 많은 양의 마크업과 스타일링을 사용할 예정인데, 이들 전부를 CoachesList.vue에 포함시키고 싶지 않으므로.

 

물론 그렇게 해도 작동은 한다. 이론적으로 한 vue앱 전체를 컴포넌트 하나로 구축할 수도 있지만, 컴포넌트의 목적 자체가 코드를 재사용 가능한 작은 부분으로 나누는 것!

→ 따라서 components 폴더 내에 coaches라는 하위 폴더를 만들어, 코치 관련 컴포넌트는 모두 이 폴더에 집어넣자.

그중 하나는 CoachItem.vue 파일.

 

coachContactLink(){}에서 아래와 같이 해도 되지만,

//CoachItem.vue
coachContactLink() {
  return '/coaches/' + this.id + '/contact';
},
coachDetailsLink() {
  return '/coaches/' + this.id;
},

▼

현재 경로를 시작점으로 해서 더욱 긴 경로를 설정할 수 있도록 아래와 같이 해도 된다.

coachContactLink() {
  return this.$route.path + '/' + this.id + '/contact';
},
coachDetailsLink() {
  return this.$route.path + '/' + this.id;
},

this.$route.path를 사용하는게 필수는 아니지만, "/coaches"에서 다른 경로로 변경해야 할 일이 생길때를 대비하는 것.

 

 

CoachesList에서만 CoachItem이 사용되므로 CoachItem은 지역컴포넌트!

// CoachList.vue
<script>
import CoachItem from '../../components/coaches/CoachItem.vue';
import CoachFilter from '../../components/coaches/CoachFilter.vue';

export default {
  components: { CoachItem, CoachFilter },

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.