관리 메뉴

심재운 블로그

vuejs 의 서로 형제 관계인 컴포넌트 사이의 정보 전달 $emit 와 $on 사용 본문

프로그래밍/VueJS

vuejs 의 서로 형제 관계인 컴포넌트 사이의 정보 전달 $emit 와 $on 사용

재우니 2019.08.01 02:52

vuejs 의 서로 형제 관계인 컴포넌트 사이의 정보 전달 $emit 와 $on 사용한다.

이벤트 버스의 객체를 만들어 사용하면 되며, vue 인스턴스를 만들어 사용하면 된다. 데이터를 저장할 필요 있으면 데이터 옵션 추가 가능하다.

이벤트를 수신하는 컴포넌트는 미리 이벤트 핸들러를 등록해 두어야 하며 , vue 인스턴스 생명주기의 created 이벤트 훅을 이용한다. vue 인스턴스가 만들어질때 $on 메소드를 사용해 이벤트 수신 정보를 등록해 두어야 한다. 이벤트를 발신하는 컴포넌트에서는 $emit 메소드를 호출한다.





<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>06-24</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<!-- 이벤트 버스 객체 -->
<script type="text/javascript">
var eventBus = new Vue();
</script>
<!-- 첫번째 자식 컴포넌트 시작-->
<template id="chidl1Template">
<div>
<button v-on:click="clickEvent">child1 button!!</button>
<div>{{currentTime}}</div>
</div>
</template>
<script type="text/javascript">
Vue.component('child1-component', {
template : '#chidl1Template',
data : function() {
return { currentTime : '' };
},
methods : {
clickEvent : function() {
var d = new Date();
var t = d.toLocaleTimeString() + " " + d.getMilliseconds() + "ms";

//같은 자식 컴포넌트에게 emit 함수로 click1 이라는 메소드에 파라미터 포함하여 전송한다.(구현부)
eventBus.$emit('click1', t); //
this.currentTime = t;
}
}
});
</script>
<!-- 첫번째 자식 컴포넌트 끝-->
<!-- 두번째 자식 컴포넌트 시작-->
<template id="chidl2Template">
<ul>
<li v-for="t in timelist">{{t}}</li>
</ul>
</template>
<script type="text/javascript">
Vue.component('child2-component', {
template : '#chidl2Template',
data : function() {
return {
timelist : []
};
},
created : function() {
//같은 자식 컴포넌트로 부터 click1 을 emit 한 함수를 on 으로 받아 child1Click 메소드 호출한다.(처리부)
eventBus.$on('click1', this.child1Click);
},
methods : {
child1Click : function(time) {
this.timelist.push(time);
}
}
});
</script>
<!-- 두번째 자식 컴포넌트 끝-->
<body>
<div id="app">
<child1-component></child1-component>
<hr />
<child2-component></child2-component>
</div>
</body>
<script type="text/javascript">
Vue.config.devtools = true;
var vm = new Vue({
el : "#app"
})
</script>
</html>





2 Comments
댓글쓰기 폼