[Vue.js] Mixin 알아보기

기본

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

 

예제 1) 

 

main.vue

<script>
import { mapGetters } from 'vuex'
import testMixin from '../mixin/testmixin'

export default {
  name: 'Main',
  
  // mixins 프라퍼티로 믹스인할 개체를 추가한다.
  mixins: [testMixin],
  data() {
  },
  created: function () {
    console.log('This is created in main!')
  }
}
</script>

 

 

testmixin.vue

<script>
  export default {
    name: 'testMixin',
    data() {
    },
    methods: {
    },
    created: function () {
      console.log('This is created in mixin!');
    }
  };
</script>

 

실행결과

Life cyle 훅의 경우 Mixin의 hook이 먼저 실행되고 컴포넌트의 hook이 이어서 실행됨을 볼 수 있다. (created 메소드 참조)

 

옵션 병합

main.vue

export default {
  name: 'Main',
  mixins: [testMixin],
  data() {
    return {
      message: 'Hello Main!!',
      mainData: 'mainData'
    }
  },
  created: function () {
    console.log('This is created in main!')
    console.log(this.$data)
  }
}
</script>

 

testmixin.vue

 

<script>
  export default {
    name: 'testMixin',
    data() {
      return {
        message: 'Hello Mixin!!',
        minxinData: 'minxinData'
      };
    },
    methods: {

    },
    created: function () {
      console.log('This is created in mixin!');
    }
  };
</script>

 

실행결과

Mixin과 컴포넌트의 data 키가 같을 경우 컴포넌트의 data 값 우선으로 머지가 되고 그외에 data들은 서로 같이 병합된다. 실행 결과를 보면 message data는 컴포넌트의 정의된 값으로 되어 있는 것을 볼 수 있다.

 

옵션 병합 (메소드)

 

main.vue

<script>
import { mapGetters } from 'vuex'
import testMixin from '../mixin/testmixin'

export default {
  name: 'Main',
  mixins: [testMixin],
  data() {
    return {
      message: 'Hello Main!!',
      mainData: 'mainData'
    }
  },
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from main')
    }
  },
  created: function () {
    console.log('This is created in main!')
    console.log(this.$data)
  }
}
</script>

 

testMixin.vue

<script>
  export default {
    name: 'testMixin',
    data() {
      return {
        message: 'Hello Mixin!!',
        minxinData: 'minxinData'
      };
    },
    methods: {
      bar: function () {
        console.log('bar')
      },
      conflicting: function () {
        console.log('from mixin')
      }
    },
    created: function () {
      console.log('This is created in mixin!');
    }
  };
</script>

 

실행 결과

 

메소드가 중복 될 경우 컴포넌트의 메소드가 우선적으로 불리게 된다.