[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>
Leave a comment