Vue.js 방법은 한 번만 호출해야 할 때 $emit와 $on을 사용하여 여러 번 호출된다.

Vue.js 방법은 한 번만 호출해야 할 때 $emit와 $on을 사용하여 여러 번 호출된다.

이 링크에 설명된 방법을 통해 구성 요소가 다른 구성 요소와 상호 작용할 수 있도록 버스를 사용하고 있다. https://forum.vuejs.org/t/create-event-bus-in-webpack-template/4546/2 .

나는 버스를 이용해서 이벤트를 내보내는 창조된 후크라고 불리는 방법을 가지고 있다.

created () {
  this.getReviewDeck()
},
myMethod () {
    bus.$emit('increment')
}

위 구성 요소에 포함된 다른 구성 요소에서 아래와 같이 생성된 후크에 이벤트 수신기를 부착한다.

created () {
  bus.$on('increment', this.incrementCount)
},
incrementCount () {
  console.log('count incremented')
}

처음 구성 요소를 방문하면 모든 것이 제대로 작동하고 콘솔에 '증가된 카운트'가 한 번 기록된다.그러나 구성 요소를 떠난 다음 다시 탐색할 때 '증가된 수'가 두 번 기록되고, 나갔다가 다시 돌아오면 이제 세 번 기록된다.

정확히 무슨 일이 일어나고 있는지, 혹은 이 문제를 어떻게 해결하는 것이 최선인지 잘 알 수 없어서 내가 구성 요소에 갈 때마다 메시지는 여러 번이 아니라 한 번만 기록된다.

파괴할 때 이벤트 핸들러를 제거해야 했다.

 beforeDestroy () {
    EventBus.$off('increment', this.incrementCount)
 },

1달러를 사용할 수 있다.

created () {
  bus.$once('increment', this.incrementCount)
},

Vue 소스 코드에서 이벤트 끄기Destroy 또는 RouteLeave 또는 다른 후크에서 버스 리스너 기능을 해제하면 오래된 수신기가 생성된 후크에 다시 등록된 새 수신기와 함께 삭제됨

파괴된 고리와 데스트로이 이전의 고리에 대해서는, 고리를 만든 후에 불려지기 때문에 이해할 수 있다.그렇게 만들어진()는 청취자를 추가하고, 파괴된()는 이전에 만들어진()의 청취자뿐만 아니라 모두 삭제한다.그러나 경로 훅의 경우, 나는 그 행동을 이해할 수 없다. 왜냐하면 그것들은 만들어지기 전에 불려지지만, 같은 재등록된 청취자들은 모두 작동하지 않기 때문이다.

내가 한 일은 이벤트 끄기다시 등록하기 전에 생성된 후크에서 수신기 버스 연결

created() {
  eventBus.$off("someListener");
  eventBus.$on("someListener", () => {
    // do smth
  })
}

하지만 이것은 컴포넌트를 다시 만들 때, 앱 라이프사이클 동안 한 번만 만들면, 등록된 청취자는 작동하지 않는다.그러나 일단 구성 요소가 생성되면 이 재등록이 필요하지 않다.

나는 비슷한 문제가 있었고 위에 언급된 답변들 중 어느 것도 나에게 효과가 없었다.나는 이 문제를 vue 글로벌 인스턴스로 eventBus를 추가하여 해결했다.

main.js 파일에 추가

Vue.prototype.$bus = new Vue();

그리고 다음과 같은 구성 요소에서 이 기능을 호출:

   mounted(){
    this.$bus.$on('chatData', (data) => {
        console.log('receieved in component');
    });
   },
   beforeDestroy() {
    this.$bus.$off('chatData');
   },
   methods:{
    sendData(data){
     this.$bus.$emit('someData',data); 
    }
   }

모든 수신기를 제거하려면:

this.$eventBus.$off()

주요 구성 요소 라이프사이클의 이전Destroy() 이벤트에 추가하십시오.

beforeDestroy() {
   this.$bus.$off('chatData');
}

이 기능은 이벤트가 발생한 후 한 번만 작업을 수행하려는 경우에 작동한다.이벤트를 계속 청취하려면 어떻게 하시겠습니까? 예를 들어, 그래프의 데이터 지점 위에 마우스를 올려 놓으면 다른 구성 요소의 작업을 트리거할 수 있습니다.그런 경우에는 1달러를 사용하는 것이 효과가 없다.내가 호버 위에서 이벤트를 내보내는 것과 $on을 사용하여 이벤트를 구독하는 것과 같은 문제에 직면하고 있는데, 호버를 한 번만 호출해야 하지만 내 경우에는 호버를 여러 번 호출해야 한다.

이런 식으로 이벤트를 내보낸다.

this.$eventBus.$emit("SHOW_HOVERLINE", d);

이벤트에 가입하는 방법은 다음과 같다.

this.$eventBus.$on("SHOW_HOVERLINE", this.someFunction);

참조URL: https://stackoverflow.com/questions/41879836/vue-js-method-called-multiple-times-using-emit-and-on-when-it-should-only-be-c