[Vue+] Mixins

Mixins

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

형식

const mixins = {
	/* 컴포넌트 옵션 (data, methods, created 등)*/
};

new Vue({
	mixins: [mixins]
})

믹스인을 주입할 컴포넌트에 mixins 속성을 선언하고 배열 안에 주입할 믹스인을 추가하게 되면 사용이 가능합니다.

예시

const mixin = {
	data() {
    	return {
        	message: "Hello"
        }
    },
    methods: {
    	showMessage() {
        	console.log(this.message);
        }
    }
}

import {mixin} from "./mixin.js";

export default {
	mixins: [mixin],
    methods: {
    	getMessage() {
        	this.showMessage();
        }
    }
}