[vue.js] 6. mixins

0. 믹스인

 

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

 

// 관련 url

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

믹스인 — Vue.js

 

1. 준비

 

1.1. ../assets/mixins.js

export const mixins = {
  data () {
    return {
      counter : 10
    }
  },
  methods: {
    addCounter() {
      this.counter++;
    },
    subCounter() {
      this.counter--;
    }
  }
};

1.2

<template>
  <div>
    parent counter : {{ counter }}
  </div>
  <button @click="addCounter">+</button>
  <button @click="subCounter">-</button>
  <hr>
</template>

<script>
import {mixins} from '../assets/mixins.js';

export default {
  mixins: [mixins]
}
</script>

사용할 함수나 데이터들을 mixins.js 정의한다.

mixins을 임포트 한 후에, mixins 안에 넣어준다.