공통 컴포넌트 간단 활용

 

vue에서 공통 컴포넌트를 사용해보자

공통 컴포넌트란?

서로 다른 부분에서 반복적인 부분을 한 컴포넌트로 사용하는 것

 

 

공통 컴포넌트를 만들어보자

일단 아래처럼 서로 비슷하지만

다른 두 컴포넌트 router가 등록되어 있다.

// routes/index.js

export const router = new VueRouter({
  routes: [
    {
      path: '/one',
      name: 'one',
      component: OneView,
    },
    {
      path: '/two',
      name: 'two',
      component: TwoView,
    },
  ]
})

 

 

그리고 두 컴포넌트 모두 내부적으로

공통 컴포넌트를 가져다가 쓰고있음

// OneView.vue
// TwoView.vue

<template>
  <div>
    <common-comp></common-comp>
  </div>
</template>

<script>
	import CommonComp from './CommonComp.vue'
	export default {
	  components: {
	    CommonComp,
	  }
	}
</script>

 

 

비슷한 view들은 공통 컴포넌트를

그저 가져다 쓸 뿐이고 분기처리는 공통 컴포넌트에서 수행하면 된다.

// CommmonComp.vue (공통 컴포넌트)

<script>
export default {
  created() {
    // 넘어온 path로 구별하여 각기 다른 action을 호출한다.
    if (this.$route.path === '/one') {
      this.$store.dispatch('FETCH_ONE');
    } else if (this.$route.path === '/two') {
      this.$store.dispatch('FETCH_TWO');
    } 
  },
  computed: {
    listItem() {
      // 등록한 name을 구분하여 각기 다른 state를 가져온다.
      if (this.$route.name === 'one') {
        return this.$store.state.one;
      } else if (this.$route.name === 'two') {
        return this.$store.state.two;
      } else return ''
    }
  }
}
</script>

 

공통 컴포넌트가 created 될 때, router를 통해 넘어온 path로 구분하여 각기 다른 action을 호출하면 된다.

또한 computed를 통해 state도 분기 처리!

 

 

그리고 그냥 쓰면 된다.

// CommonComp.vue (공통 컴포넌트)

<template>
    <div>
    <ul>
      <li v-for="(item, index) in listItem" :key="index">
        <!-- 가져온 state를 표시 -->
        {{ item }}
        <!-- 여기서 또 분기처리도 가능~! -->
      </li>
    </ul>
  </div>
</template>

 

끝