vue - 이벤트 버스 이벤트 버스

vue - 이벤트 버스 이벤트 버스
이벤트 버스는 이벤트 버스라고도 합니다.Vue에서 Event Bus를 사용하여 구성 요소로 데이터를 전달하는 교량으로 사용할 수 있다. 모든 구성 요소가 같은 이벤트 센터를 공용하는 것처럼 이 센터에 이벤트를 보내거나 수신할 수 있기 때문에 구성 요소는 위아래로 평행으로 다른 구성 요소를 알릴 수 있지만 너무 편리하기 때문에 잘못 사용하면 유지하기 어려운 재난을 초래할 수 있다.따라서 더욱 완벽한 Vuex가 상태 관리 센터로서 알림의 개념을 공유 상태 차원으로 끌어올려야 한다.
공식적으로 추천하는 상태 관리 방안은 Vuex다.하지만 프로젝트가 크지 않고 상태 관리도 복잡하지 않으면 Vuex를 사용할 필요가 없다.
EventBus 사용
초기화

첫 번째 방법:main.js에서 EventBus

초기화

Vue.prototype.$EventBus = new Vue()

두 번째 방법: Bus를 만듭니다.다른 모듈에서 사용하거나 감청할 수 있도록 이벤트 버스를 만들고 내보냅니다

// Bus.js
import Vue from 'vue'
export const EventBus = new Vue();

네가 해야 할 일은 단지 Vue를 도입하고 그것을 내보내는 실례일 뿐이다. (이런 상황에서 나는 그것을 Event Bus라고 부른다.)실질적으로 이것은 DOM을 갖추지 않은 구성 요소로 단지 실례적인 방법만을 가지고 있기 때문에 매우 가볍다.
이제 Event Bus를 만들었습니다. 다음에 해야 할 일은 구성 요소에 그것을 불러오고, 부자 구성 요소에서 서로 메시지를 전달하는 것과 같은 방법을 호출하는 것입니다.
이벤트 보내기 및 수락
사실 부자 구성 요소와의 통신 차이가 많지 않아 EventBus.$emit('emit '， ) 로 발송, EventBus.$on("emit ", callback(payload1,…)) 수락
이제 A 구성 요소가 B 구성 요소와 통신한다고 가정합니다.

 
import { EventBus } from "../Bus.js";
export default {
    data(){
        return {
        msg: ''
        }
    },
    mounted() {
        EventBus.$on("bMsg", (msg) => {
            // a     b      
            this.msg = msg;
        });
    },
    methods: {
        sendMsgA() {
            EventBus.$emit("aMsg", '  A     '); // a     
        }
    }
}; 






 
import { EventBus } from "../event-bus.js";
export default {
    data(){
        return {
        msg: ''
        }
    },
    mounted() {
        EventBus.$on("aMsg", (msg) => {
            // b     a      
            this.msg = msg;
        });
    },
    methods: {
        sendMsgB() {
            EventBus.$emit("bMsg", '  b     '); // b    
        }
    }
};

데이터를 한 번만 감청(수락)하면 사용할 수 있음EventBus.$once(' ', callback(payload1,…)제거 제거 이벤트 모니터
EventBus.$off ('이벤트 이름', 리셋 함수)

EventBus.$off(' ', callback), 이 리셋된 감청기만 제거합니다.

EventBus.$off(' '), 이 사건의 모든 감청기를 제거합니다.

EventBus.$off(), 모든 이벤트 감청기를 제거하고 매개 변수를 추가할 필요가 없습니다.

//           EventBus
import { EventBus } from '../Bus.js'

//       
const clickHandler = function(clickCount) {
  console.log(`Oh, hello)`)
}

//       
EventBus.$on('i-got-clicked', clickHandler);

//     
EventBus.$off('i-got-clicked', clickHandler);

글로벌 EventBus
글로벌 EventBus는 일부 예에서는 사용을 권장하지 않지만 구성 요소 간에 데이터를 공유할 수 있는 매우 아름답고 간단한 방법입니다.
그것의 작업 원리는 게시/구독 방법으로 통상적으로 Pub/Sub라고 부른다.
전역적이기 때문에 모든 이벤트가 구독되고 모든 구성 요소가 발표되며 구독 구성 요소가 업데이트됩니다.즉, 모든 구성 요소가 이벤트를 버스에 발표하고, 버스는 다른 구성 요소가 구독하고, 구독하는 구성 요소가 업데이트된다는 것이다.
글로벌 EventBus 작성
전역 이벤트 버스는 간단한 vu 구성 요소에 불과합니다.

var EventBus = new Vue();

Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})
//            ，        

$on 및 $emit 사용
이 특정한 버스에서 두 가지 방법을 사용한다.보내는 이벤트를 만드는 데 사용합니다. $emit입니다.$on에 가입할 다른 사용자:

this.$bus.$emit('nameOfEvent',{ ... pass some event data ...});

this.$bus.$on('nameOfEvent',($event) => {
    // ...
})

EventBus의 장점과 단점
결점

vue는 한 페이지의 응용 프로그램인 것을 모두가 알고 있다. 만약에 한 페이지가 새로 고침된 후에 이와 관련된 이벤트버스가 제거되어 업무를 계속할 수 없게 된다.

업무가 반복되는 페이지가 있다면 이벤트버스는 감청할 때 여러 번 촉발되는 것도 매우 큰 위험이다.이때 우리는 이벤트버스의 프로젝트 관계를 잘 처리해야 한다.일반적으로 vue 페이지를 제거할 때 EventBus 이벤트 수신을 제거하는 데 사용됩니다.

모두 하나의 Vue 실례를 사용하기 때문에 반복적으로 터치하는 상황이 발생하기 쉽다. 두 페이지 모두 같은 이벤트 이름을 정의했고 $off로 삭제하지 않았다(루트가 바뀔 때 자주 나타난다).

장점

다중 구성 요소 간의 번거로운 사건 전파를 해결했다.

사용 원리는 매우 간단하고 코드량이 적다.

전재와 인용
vue 편의 이벤트 버스(EventBus) Vue를 사용합니다.js 전역 이벤트 버스 만들기
Vue 이벤트 버스(EventBus) 사용 상세 정보