Vue 에서 Mixins 사용

Mixins

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

사용법

export const HelloMixins = {
    data() {
        return {
            hello: false
        }
    },
    methods: {
        showHello() {
            this.hello = true;
        },
        closeDialog() {
            this.hello = false;
        }
}

// helloForm.vue
import { HelloMixins } from './hello.js';

export default {
    mixins: [ HelloMixins ],
    methods: {
        submitHello() {
            // sub...hello...
        }
    }
}

다음과 같이 사용하면 기존에 있는 methods 와 methods 가 하나로 합쳐짐.
공통으로 사용하는 공통 로직을 빼서 사용하면 효율적으로 보임.