728x90
App.vue
<template>
<div>
<HW mesg="이벤트버스1"/>
<HW2 mesg="이벤트버스2"/>
</div>
</template>
<script>
import HW from "./components/HW.vue"
import HW2 from "./components/HW2.vue"
export default {
components:{
HW,
HW2
},
}
</script>
<style>
</style>
EventBus
<script>
import Vue from 'vue'
var eventBus = new Vue() //이벤트 버스 생성
export default eventBus;
</script>
HW.vue
<template>
<div>
<h1>{{ mesg }}</h1>
<button @click="x">HelloWorld2로 이벤트 전달</button>
</div>
</template>
<script>
import eventBus from './EventBus.vue'; //1. import
export default {
props:{
mesg:String
},
methods:{
x:function(){
console.log("x 호출");
eventBus.$emit("xyz"); //이벤트 전달명 xyz
}
}
}
</script>
<style>
</style>
HW2.vue
<template>
<div>
<h1>{{ mesg }}</h1>
<input type="text" v-bind:value="receiveData">{{ receiveData }}
</div>
</template>
<script>
import eventBus from './EventBus.vue';
export default {
props:{
mesg:String
},
//컴포넌트 생성 시 형제에서 전달되어 이벤트처리할 함수 등록
created:function(){
console.log("create 호출");
eventBus.$on("xyz", this.receive); //$on 뒤에 형제가 버스에 전달하는 이벤트명과 이벤트처리할 함수 등록
},
data:function(){
return {
receiveData:""
}
},
methods:{
receive:function(){
console.log("receive 호출");
this.receiveData="형제가 호출 완료";
}
}
}
</script>
<style>
</style>
'단순 코드 기록 > Vue' 카테고리의 다른 글
| Vue_slot (0) | 2024.03.11 |
|---|---|
| Vue_Emit (0) | 2024.03.11 |
| Vue_자식에서 부모로 가는 이벤트 (0) | 2024.03.08 |
| Vue_Select Option (0) | 2024.03.08 |
| Vue_개별 삭제, 선택 삭제 (0) | 2024.03.08 |