[vue] 형제 컴포넌트 간 값 전송하기 eventBus

main.js

import '@babel/polyfill'

import Vue from 'vue'

import './plugins/vuetify'

import App from './App.vue'

Vue.config.productionTip = false

// 형제 컴포넌트 간 값 전달 방법 1

export const eventBus = new Vue({

// 메소드로 만들어 형제 컴포넌트에서 선언한 userWasEdited를 메소드화

methods:{

userWasEdited(date){

this.$emit('userWasEdited', date)

}

}

})

// eventBus 가 여러개 생성될 경우 관리 하는 방법

new Vue({

render: h => h(App)

}).$mount('#app')

eventBus = new Vue를 선언해주고

// 형제 컴포넌트 간 값 전달 방법 1

export const eventBus = new Vue({

// 메소드로 만들어 형제 컴포넌트에서 선언한 userWasEdited를 메소드화

methods:{

userWasEdited(date){

this.$emit('userWasEdited', date)

}

}

})

// eventBus 가 여러개 생성될 경우 관리 하는 방법

형제 컴포넌트 2

<template>

<div class="yellow lighten-3 pa-3">

<h3>회원 정보를 수정할 수 있습니다.</h3>

<p>수정사항</p>

<v-text-field label="이름" v-model="user.name"></v-text-field>

<v-text-field label="주소" v-model="user.address"></v-text-field>

<v-text-field label="전화번호" v-model="user.phone"></v-text-field>

<v-radio-group v-model="user.hasDog">

<v-radio label="`반려견유`" :value="true"></v-radio>

<v-radio label="`반려견무`" :value="false"></v-radio>

</v-radio-group>

<v-btn color="info" @click="update">수정</v-btn>

</div>

</template>

<script>

import { eventBus } from '../main'

export default {

// 부모에게 받은 값을 바로 가공하면 에러발생. 가공필요.

props:['name','address','phone','hasDog'],

data() {

return{

user:{}

}

// 부모 컴포넌트에서 props로 받은 값을 자식컴포넌트로 바꾼 뒤 사용하면 에러가 발생하지 않는다.

},created(){

this.user.name = this.name,

this.user.address = this.address,

this.user.phone = this.phone,

this.user.hasDog = this.hasDog

},

methods:{

update(){

// 자식 컴포넌트에서 부모 컴포넌트로 보내는 것이 $emit()

this.$emit("child",this.user)

// eventBus 를 통해서 형제 컴포넌트에게 값을 전송할 수 있다.

// eventBus가 하나의 부모 컴포넌트 역할을 하며 $emit를 통해서 신호를 받는다.

// eventBus.$emit('userWasEdited', new Date()) 한개의 경우 전송 방법

// main.js에 선언한 메소드로 전달

eventBus.userWasEdited(new Date())

}

}

}

</script>

methods:{

update(){

// 자식 컴포넌트에서 부모 컴포넌트로 보내는 것이 $emit()

this.$emit("child",this.user)

// eventBus 를 통해서 형제 컴포넌트에게 값을 전송할 수 있다.

// eventBus가 하나의 부모 컴포넌트 역할을 하며 $emit를 통해서 신호를 받는다.

// eventBus.$emit('userWasEdited', new Date()) 한개의 경우 전송 방법

// main.js에 선언한 메소드로 전달

eventBus.userWasEdited(new Date())

}

}

를 통해서 값을 받을 수 있다.

eventBus가 하나의 부모 컴포넌트 역할을 하여 값을 받아 저장..

형제 컴포넌트 1

<template>

<div class="red lighten-3 pa-3">

<h3>자세한 회원 정보를 확인합니다.</h3>

<v-list dense>

<v-list-tile>

<v-list-tile-content>이름:</v-list-tile-content>

<v-list-tile-content class="align-end">

{{name}}

</v-list-tile-content>

</v-list-tile>

<v-list-tile>

<v-list-tile-content>주소:</v-list-tile-content>

<v-list-tile-content class="align-end">

{{address}}

</v-list-tile-content>

</v-list-tile>

<v-list-tile>

<v-list-tile-content>phone:</v-list-tile-content>

<v-list-tile-content class="align-end">

{{phone}}

</v-list-tile-content>

</v-list-tile>

<v-list-tile>

<v-list-tile-content>반려견유무:</v-list-tile-content>

<v-list-tile-content class="align-end">

{{hasDogKr}}

</v-list-tile-content>

</v-list-tile>

<v-list-tile>

<v-list-tile-content>수정날짜:</v-list-tile-content>

<v-list-tile-content class="align-end">

{{editedDate}}

</v-list-tile-content>

</v-list-tile>

</v-list>

</div>

</template>

<script>

import {eventBus} from '../main'

export default {

// 부모로부터 값을 받는 props

props:['name','address','phone','hasDog'],

computed:{

// 부모에게서 전달된 값을 this로 활용 가능.

sayHellow() {

return this.nameOfChild + '환영합니다.'

},

hasDogKr(){

return this.hasDog === true ? '있음':'없음'

}

},

methods:{

},

data(){

return{

editedDate:null

}

},

created(){

// 형제 컴포넌트에서 값을 받는 리스너 .. eventBus.$on('보낸요청값',(data)=>{})

eventBus.$on('userWasEdited' ,(date) => {

// userWasEdited를 통해 받은 데이터트 값을 받음

this.editedDate = date

})

}

}

</script>

created(){

// 형제 컴포넌트에서 값을 받는 리스너 .. eventBus.$on('보낸요청값',(data)=>{})

eventBus.$on('userWasEdited' ,(date) => {

// userWasEdited를 통해 받은 데이터트 값을 받음

this.editedDate = date

})

}

eventBus.$On이 리스너 역할을 하여 값을 받아 전송할 수 있다.

<template>

<div class="blue lighten-3 pa-3">

<h1>User 컴포넌트</h1>

<p>이름: {{ name }}</p>

<hr>

<v-layout row wrap>

<v-flex xs12 sm6>

<UserDetail

:name="name"

:address="address"

:phone="phone"

:hasDog="hasDog"

></UserDetail>

</v-flex>

<v-flex xs12 sm6>

<UserEdit

:name="name"

:address="address"

:phone="phone"

:hasDog="hasDog"

@child="parents"

></UserEdit>

</v-flex>

</v-layout>

</div>

</template>

<script>

import UserDetail from "./UserDetail.vue"

import UserEdit from "./UserEdit.vue"

export default {

components: {

UserDetail,

UserEdit

},

data (){

return{

name: 'john',

address: 'test_address',

phone:'070-4358-6643',

hasDog: true,

}

},

methods :{

// 형제 컴포넌트 2에서 전송된 this.user 를 통해서 값을 받는다.

parents(user) {

this.name=user.name

this.address=user.address

this.phone=user.phone

this.hasDog=user.hasDog

}

}

}

</script>