컴포넌트 패턴 참조 사이트

https://github.com/JaewonDH/vue-components-pattern

mixin

1. 폴더 생성

• src 하위에 mixins 폴더 생성 후 testMixin.js 파일 생성
  

2. testMixin.js

공통으로 사용할 data 및 함수를 선언 한다.

export const testMixin = {
    data(){
        return{
            count:0
        }
    },
    methods:{
        plusCount(){            
            console.log('testMixin.js plusCount');
            this.count++;
        },
        minusCount(){
            this.count--
        }
    }
}

3. testMixin.js 사용하기

• testMixin.js import 한다.
• testMixin.js에 선언 된 data의 count 와 methods plusCount를 사용 할 수 있다.
• 주의 사항으로 testMixin.js에 선언한 함수와 Components의 함수이름이 동일 할 경우 mixin인의 함수가 호출 되는 것이 아닌 현재 Components의 선언 되어있는 함수가 호출 되어 사용할 때 주의 해야 된다.

<template>
  <div id="app">
    <span>Count {{count}}</span>
    <button @click="onClick">plus</button>
  </div>
</template>

<script>
import {testMixin} from '@/mixins/testMixin.js';
export default {
  mixins:[testMixin],
  name: 'App',  
  methods:{
    onClick(){
      this.plusCount();
    },
    plusCount(){
      console.log('app.vue plusCount');
    }
  }
}
</script>

extends

1.폴더 생성

• source 하위 폴더에 extends 폴더를 만들고 상속할 컴포넌트를 하나 생성한다. test.vue
  

2. component 생성

• 공통으로 사용할 data 및 함수를 선언 한다.

<template>
  <div>
      템플릿 코드 !!!!!
  </div>
</template>

<script>
export default {
  data(){
        return{
            count:0
        }
    },
    methods:{
        plusCount(){            
            console.log('testMixin.js plusCount');
            this.count++;
        },
        minusCount(){
            this.count--
        }
    }
}
</script>

<style>

</style>

3. component extends하여 사용하기

• testExtend import 한다.
• extends 프로퍼티를 만들고 import 한 testExtend 추가하여 상속하여 testExtend 있는 함수와 data를 사용 할 수 있다.

• extends에는 한개의 component만 사용이 가능 

• mixin인와 비슷하게 data의 함수의 이름이 동일할 경우 상속한 component의 함수가 호출 되는 것이 아닌 현재 Components의 선언 되어있는 함수가 호출 되어 사용할 때 주의 해야 된다.

<template>
  <div id="app">
    <span>Count {{count}}</span><br>
    <button @click="onClickPlus">plus</button> <br>
    <button @click="onClickMinus">minus</button>
  </div>
</template>

<script>
import testExtend from '@/extends/testExtend'
export default {
  extends: testExtend,
  name: 'App',
  methods: {
    onClickPlus() {
      this.plusCount();
    },
    onClickMinus() {
      this.minusCount();
    }
  }
}
</script>

plugin

1.폴더 생성

• source 하위 폴더에 plugins 폴더를 만들고 testPlugin.js 파일을 만든다
  

2. plugin 파일 생성

class Calculator {
    constructor() {
        this.value = 0;
    }

    plus() {
        this.value++;
    }

    minus() {
        this.value--;
    }

    getValue() {
        return this.value;
    }
}
export default {
    install: (Vue, options) => {
        Vue.globalMethod = () => {
            console.log('call globalMethod');
        };

        // inject component options
        // 플러그인을 통해, 믹스인 옵션도 주입이 가능
        Vue.mixin({
            beforeCreate() {
                console.log('option', options);
            }
        });

        // add instance property
        Vue.prototype.$calculator = new Calculator();
    }
}

3. plugin 사용하기

• main.js에 생성한 plugin을 import 후 Vue.use로 옵션 및 생성한 plugin 전달

import Vue from 'vue'
import App from './App.vue'
import testPlugin from './plugins/testPlugin'
Vue.config.productionTip = false

Vue.use(testPlugin,{name:'jjjjj'});

new Vue({
  render: h => h(App),
}).$mount('#app')

• component에서 글로벌 plugin 사용하기

<template>
  <div id="app">    
  </div>
</template>

<script>
import Vue from 'vue';
export default {  
  name: 'App',
  created(){
    this.$calculator.plus();     
    console.log(this.$calculator.getValue());
    Vue.globalMethod();
  },
}
</script>