mixin

Mixin

• 만약 여러 컴포넌트가 같은 형식의 data나 methods를 사용한다면 모듈화를 시키는 것이 굉장히 편할 것이다.
• 컴포넌트마다 똑같은 형식의 data나 methods를 일일이 치고 있다면 생산성이 굉장히 떨어지고 비효율적일 것이다. 특히 겹치는 부분이 많을수록 더욱 그럴것이다!
• Vue.js에서 Mixin을 통해 이러한 문제를 해결할 수 있다!

 

컴포넌트들이 공유할 mixin 파일 (MixinTest.js)

• 컴포넌트들이 공통으로 사용할 data 속성과 methods 속성을 작성한 파일을 하나 만들자

const MixinTest = {
    data() {
        return {
            num: 1
        }
    },
    methods: {
        plus_one() {
            this.num++;
        },
        minus_one() {
            this.num--;
        }
    }
}

export default MixinTest;

 

부모 컴포넌트

• mixin 파일을 불러오고 mixin에서 정의한 data 속성의 num과 num을 증가시키는 메서드를 사용!

<template>
  <h1>mixin num: {{ num }}</h1>
  <h1>I'm PARENT</h1>
  <button @click="plus_one">num ++</button>
  <MixinChild />
</template>


<script>
import MixinChild from "./components/MixinChild.vue";
import MixinTest from "./components/MixinTest";
export default {
  components: { MixinChild },
  name: "App",
  mixins: [MixinTest],
};
</script>

자식 컴포넌트

• 부모 컴포넌트와 마찬가지로 mixin 파일을 불러오고 mixin에서 정의한 data 속성의 num과 num을 증가시키는 메서드를 사용!

<template>
  <h1>mixin num: {{ num }}</h1>
  <h1>I'm Child</h1>
  <button @click="plus_one">num ++</button>
</template>

<script>
import MixinTest from "./MixinTest";
export default {
  mixins: [MixinTest],
};
</script>

<style>
</style>