vuejs 의 서로 형제 관계인 컴포넌트 사이의 정보 전달 $emit 와 $on 사용
2019. 8. 1. 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>
'프로그래밍 > VueJS' 카테고리의 다른 글
| Vue.js & web api 를 활용한 동적 select box 구현하기 (using cdn) (0) | 2024.02.07 |
|---|---|
| Vue JS CDN 사용법과 효과적인 사용법 (0) | 2023.11.10 |
| Cannot find module 'webpack-cli/bin/config-yargs' 오류메시지 (0) | 2018.12.03 |
| vue.js 의 axios 로 웹서비스 호출하기 (0) | 2018.05.03 |
| VueJS 관련 샘플 사이트 (0) | 2018.04.25 |