Vue.js mixin 사용 방법: 코드 재사용 및 컴포넌트 공유

Mixin

Vue.js의 mixin은 컴포넌트 간에 코드 및 로직을 공유하고 재사용하기 위한 도구입니다. mixin을 통해 컴포넌트에 추가적인 데이터 속성, 메서드, 라이프사이클 훅 등을 주입하여 코드 재사용을 쉽게 할 수 있도록 해줍니다. 쉽게 말해서 정의한 mixin인 코드를 다른 컴포넌트에서 사용할 수 있도록 하는 방법입니다.

Vue.js 2와 Vue.js 3에서의 mixin 사용법은 다릅니다.

Vue.js 2에서는 `mixins` 속성을 사용하여 mixin을 추가하고, Vue.js 3에서는 Composition API의 `provide` 및 `inject` 함수를 사용하여 비슷한 동작을 구현합니다.

Vue.js 3의 Composition API를 사용하여 mixin보다 더 강력하고 유연한 컴포넌트 로직을 작성할 수 있습니다. 또한 Vue.js 3 Composition API는 TypeScript와 함께 사용하기가 쉽습니다.

Vue.js 2의 mixin

1. Mixin 생성

JavaScript 객체로 mixin을 생성합니다.

myMixin.js:

const myMixin = {
    data() {
        return {
            mixinData: 'This data is from the mixin',
        };
    },
    methods: {
        sayHelloWorld() {
            console.log('Hello World from the mixin');
        },
    },
};

위 처럼 mixin을 별도의 `.js`파일로 생성하는 것 외에도 Vue.js에서 mixin을 컴포넌트로 생성하고 'export default'로 내보내는 것도 가능합니다. 이때 mixin은 화면을 그리는 것이 아닌 데이터 속성, 메서드, 라이프사이클 훅등을 주입하기 위함이므로 <template> 태그가 없어도 무방합니다.

myMixin.vue

<template>
  <!-- mixin 템플릿 부분은 Empty or template 태그 지우기 -->
</template>

<script>
export default {
  data() {
    return {
      mixinData: 'This data is from the mixin',
    };
  },
  methods: {
    sayHelloWorld() {
      console.log('Hello World from the mixin');
    },
  },
};
</script>

2. Mixin 사용:

mixin을 사용할 컴포넌트에 `mixins`속성을 사용하여 mixin을 추가하여 사용합니다.

// myComponent.vue
<template>
  <div>
    <h1>My Component</h1>
    <p>{{ mixinData }}</p>
    <button @click="sayHelloWorld">Say Hello World</button>
  </div>
</template>

<script>
import myMixin from './MyMixin.vue';

export default {
  mixins: [myMixin], // mixin을 추가

  data() {
    return {
      componentData: 'This data is from Component',
    };
  },
};
</script>

해당 컴포넌트는 추가한 mixin인 myMixin의 데이터와 메서드 등을 사용할 수 있습니다. 또한 컴포넌트와 mixin 간의 데이터 간 충돌이 발생하더라도, 컴포넌트의 것이 우선되기 때문에 충돌도 방지할 수 있습니다.

Vue.js 3의 mixin

Vue.js 2와 Vue.js 3의 mixin 사용법은 유사하지만 몇 가지 차이점이 있습니다. Vue.js 2에서는 `.js` 혹은 `.vue`로 mixin을 생성하고 적용하고자 하는 컴포넌트에 `mixins` 속성을 사용하여 mixin을 추가해주면 됩니다.

Vue.js 3에서는 Vue 3 Composition API의 `provide` 및 `inject` 기능을 사용하여 mixin과 유사한 동작을 구현할 수 있습니다.

1. mixin과 유사한 기능 정의:

import { ref, provide, inject } from 'vue';

const mixinData = ref('This data is from the mixin');

function sayHello() {
  console.log('Hello from the mixin');
}

function useMixin() {
  provide('mixinData', mixinData);
  provide('sayHello', sayHello);
}

export { useMixin };

2. 컴포넌트에서 mixin 사용:

컴포넌트에서 mixin과 유사한 동작을 사용하기 위해 `inject` 함수를 사용합니다.

import { mYeComponent, inject } from 'vue';
import { useMixin } from './myMixin';

const MyComponent = defineComponent({
  setup() {
    useMixin(); // Mixin과 비슷한 동작을 사용

    const componentData = ref('This data is from the component');
    const mixinData = inject('mixinData');
    const sayHello = inject('sayHello');

    return {
      componentData,
      mixinData,
      sayHello,
    };
  },
});