Vue Mixin 학습정리

Vuejs 에서 제공하는 Vue 객체에 필요한 기능을 재활용 할 때 사용한다

한번 만든 기능을 여기 저기의 객체에서 공통으로 사용하고 싶을 때 쓴다

재사용 라이브러리라고 생각하면 된다

count 를 더하는 js 를 Mixin.js 파일로 만들고

count 를 빼는 vue 파일에서 Mixin 을 선언하면 count 를 더하는 기능까지 사용할 수 있다

// Test.vue
<template>
	<div id="app">
		<div @click="onClick">
	</div>
</template>
<script>
	import countMixin from './mixin/countMixin'
	export default {
		mixins: [countMixin],
		name: 'app',
		data: function() {
			return {
				data: 1 + this.count,
			}
		}
	}
</script>

// countMixin.js
let countMixin = {
    props: {
        count:{
            default: 0
        }
    },
    methods:{
        onClick(){
            this.data++;
        }
    }
};
export default countMixin;

Uploaded by N2T