development/vue.js

EventBUS 사용법

foruheon 2019. 8. 19. 10:32

vue.js를 사용하면 컴포넌트간의 데이터 이동이 필요할때가 있다.

 

그럴때에는 Eventbus를 사용하면 된다.

 

 

event-bus.js

 

import Vue from "vue";
export const EventBus = new Vue();

 

 

TemplateLoad.vue => 보내는 쪽

 

import {EventBus} from "../../plugins/event-bus";

 

axios.get(baseURL + '/template/template_detail/' + this.selected).then(data => {
this.tp_contents = data.data.data[0].tp_contents;
EventBus.$emit('template-load', this.tp_contents);
})

 

 

SmartEditor => 받는 쪽

 

import {EventBus} from "../../plugins/event-bus";

 

 

EventBus.$on('template-load', (contents) => {
editor.setData(contents);
this.$store.commit('SET_CONTRACT_CONTENTS_SAVE', contents);
})

 

 

'development > vue.js' 카테고리의 다른 글

vue-cli 설치  (0) 2020.06.03
vue.js list 렌더링  (0) 2019.08.06