[Vue.js] mixin이란

mixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다. 컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이 컴포넌트의 고유 옵션에 “혼합”됩니다.
공식 문서 참고

여러 컴포넌트가 created, methods, data 같은 옵션을 공통적으로 사용하는 것처럼 컴포넌트마다 동일한 코드를 중복으로 작성할 필요 없이, 하나의 Mixin객체를 생성해서 여러 컴포넌트가 참조해서 사용하도록 하는 방법입니다. 공식문서에서는 property를 사용자 정의하는 데에만 사용하도록 권장하고 있습니다.

 

 

 

사용 방법

다음 예시는 공식 문서를 참고한 코드입니다.

created와 methods 요소 옵션을 가지는 객체와 이 객체를 사용할 컴포넌트를 정의한 코드입니다.

 

전역 Mixin 사용

mixin을 전역으로 적용하면 이후에 생성된 모든 Vue 인스턴스 에 영향을 미칩니다.

🤔  plugin으로 등록하고 사용하는 방법도 있습니다.

 

옵션 병합

옵션 병합이라고 해서, Mixin객체를 참조하는 컴포넌트에 동일한 요소 옵션이 있는 경우, 컴포넌트에 선언된 data 오브젝트를 우선적으로 하여 재귀적으로 병합됩니다. 

 

옵션 병합 우선 순위

Mixin과 컴포넌트에 동일한 요소 옵션에 동일한 key가 있는 경우에 우선순위입니다.

1. 컴포넌트의 요소 옵션
2. Mixin객체

공식 문서의 예시를 확인해 보겠습니다.

공식문서 mixin 예시 코드

 

사용 방법

1. 하나의 Javascript파일에 구현합니다. CommonMixin.js라고 이름 짓고, 여기에 공통적으로 사용할 Mixin객체를 만듭니다.

2. 전역으로 Mixin을 설정 : app.vue에 import 시켜서 Mixins : [commonmixin]으로 등록하면, 전역 Mixin으로 등록이 됩니다. 

3. 특정 컴포넌트에만 Mixin을 설정 : app.vue에 Mixins를 등록하지 말고, 사용할 컴포넌트에 CommonMixin을 import하고, mixins 설정해서 사용하면 됩니다.