mixin | Component recycling

mixin

믹스인은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법입니다. 믹스인에 정의할 수 있는 재사용 로직은 data, methods, create 등과 같은 컴포넌트 옵션입니다.

 

 

믹스인 코드 형식

믹스인을 주입 할 컴포넌트에 mixins 속성을 선언하고 배열 [] 안에 주입할 믹스인들을 추가합니다.

 

src/mixins/ListMixin.js

import EventBus from '@/utils/EventBus';

// mixin
export default {
  // 재사용할 component option & logic | data, methdos, create 등...
  created() {
    EventBus.$emit('start:spinner');
    this.$store
      .dispatch('FETCH_LIST', this.$route.name)
      .then(() => {
        EventBus.$emit('end:spinner');
      })
      .catch((e) => console.log(e));
  },
};

 

src/views/NewsView.vue

<template>
  <div>
    <list-item></list-item>
  </div>
</template>

<script>
import ListItem from '../components/ListItem.vue';
import ListMixin from '../mixins/ListMixin'

export default {
  components: {
    ListItem,
  },
  mixins: [ListMixin],
}
</script>

 

 

 

NewsView.vue 컴포넌트에서 ListMixin.js에 선언 한 created() Life cycle Hook이 실행 됩니다.

 

 

---

 

캡틴판교 | Crcaking Vue.js | Mixins

https://joshua1988.github.io/vue-camp/reuse/mixins.html

Mixins | Cracking Vue.js