재사용 & 컴포지션(1) - 믹스인

 

믹스인은 이름이 나타내고 있는 것처럼 컴포넌트에 무언가를 섞어 원하는 것을 구현하는 기능이다.

믹스인을 구현하고 동작시키는 과정을 순서대로 쓰면 아래와 같이 정리할 수 있다.

 

1. 믹스인할 객체를 만들고

2. 컴포넌트에 객체를 믹스인하고

3. 나머지 부분을 구현해 완성한다

 

참고한 사이트

kr.vuejs.org/v2/guide/mixins.html

velog.io/@bluestragglr/Vue.js-Mixin

---

1. 기초

• Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법이다.
• mixin 객체는 모든 구성 요소 옵션을 포함할 수 있다.
• 컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이 컴포넌트의 고유 옵션에 “혼합”된다.

// mixin 객체 생성
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// mixin을 사용할 컴포넌트 정의
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

 

2. 옵션 병합

• 믹스인에서 선언한 속성을 컴포넌트에서 다시 선언할 수 있으며, 이 경우 컴포넌트에 선언된 값을 우선하여 병합된다.
• 예를 들어 data 오브젝트의 내용이 상충하는 경우, 컴포넌트에 선언된 data 오브젝트를 우선으로 하여 재귀적으로 병합된다.

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

같은 이름의 훅 함수가 배열에 병합되어 모든 함수가 호출되지만, mixin 훅은 컴포넌트 자체의 훅 이전에 호출된다.

var mixin = {
  created: function () {
    console.log('mixin hook called')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('component hook called')
  }
})

// => "mixin hook called"
// => "component hook called"

 

3. 전역 Mixin

mixin은 전역으로 적용할 수도 있지만, mixin을 전역으로 적용하면 이후에 생성된 모든 Vue 인스턴스에 영향을 미치므로 주의해야 한다.

// `myOption` 사용자 정의 옵션을 위한 핸들러 주입
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"