構成部品配列参照サイト

mixin

1.フォルダの作成

srcでmixinフォルダを作成し、testMixinを作成します.jsファイルの作成

2. testMixin.js

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

3. testMixin.jsの使用

<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.コンポーネントの作成

<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の使用

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

<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サブフォルダにプラグインフォルダを作成し、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の使用

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')

<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>