[Vue.js] Vue.js Mixin

만들어지는 Vue 객체에 공통적인 기능들을 따로 모아서 관리할 수 있다. 이를 Mixin 이라고 한다. 아래 예시에서 Mixin 객체 내부에 정의된 두 메서드를 vm1 에서 사용하는 것을 확인할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue"></script>
<script>
	/* Mixin 객체 생성 */
	var myMixin = {
			created : function(){
				alert('Mixin Created')
			},
			methods : {
				test1 : function(){
					alert('test1')
				},
				test2 : function(){
					alert('test2')
				}
			}
	}
	
	/* 사용법1 */
	/*
	var Component = Vue.extend({
		mixins : [myMixin]
	})
	var component = new Component()
	*/
	
	window.onload = function(){
		/* Mixin 객체를 등록할 Vue 객체 */
		var vm1 = new Vue({
			el : '#test1',
			mixins : [myMixin]
		})
	}
</script>
</head>
<body>

	<div id='test1'>
		<button type='button' @click='test1'>버튼</button>
		<button type='button' @click='test2'>버튼</button>
	</div>
	
</body>
</html>

Updated:

Leave a comment