Vue.js

$emit, $on

✨✨✨✨✨✨✨ 2021. 1. 10. 15:06
반응형

$emit, $on

bus.js

import Vue from 'vue';
export default new Vue();

App.vue

methods: {
  startSpinner() {
    this.lodingStatus = true;
  },
  endSpinner() {
    this.lodingStatus = false;
  }
},
created() {
  // bus.$emit('start:spinner');이 선언된 곳을 만나면
  // 아래 내용이 실행됨
  bus.$on('start:spinner', this.startSpinner);
}

메인에 진입 시 App.vue의 created가 실행되고 아래 내용이 선언됨으로써 bus.$emit('start:spinner')가 실행될때 까지 계속 기다리게된다.$emit를 만나게 된다면 this.startSpinner 함수를 실행

bus.$on('start:spinner', this.startSpinner)




아래 실행 순서 


반응형