삭제된 하위 구성 요소에서 이벤트 수신 중지

삭제된 하위 구성 요소에서 이벤트 수신 중지

자녀 컴포넌트를 동적으로 추가할 수 있는 부모가 있습니다.

자 구성 요소가 마운트에 추가되면 이벤트에 청취자를 등록합니다.

EventBus.$on('content-type-saving', function() {
    logic here...
}

문제는 그 컴포넌트를 하위 컴포넌트 배열에서 삭제하여 부모 컴포넌트를 삭제해도 그 컴포넌트 내의 코드가 실행된다는 것입니다.

어떻게 하면 이런 일을 막을 수 있을까요?이거 먹어봤어

    beforeDestroy() {
      //do something before destroying vue instance
        EventBus.$off('content-type-saving')
    }

하지만 다른 모든 아동 컴포넌트에서도 이 이벤트가 꺼졌습니다.그래서 아직 살아 있는 아동 컴포넌트에서는 이 이벤트가 꺼졌기 때문에 논리적인 것은 더 이상 할 수 없습니다.

이벤트를 끄면 해당 하위 구성 요소에 대한 이벤트 청취에만 영향을 줄 뿐 모든 하위 구성 요소에 대한 이벤트는 켜지지 않는다고 생각했습니다.

파괴된 컴포넌트가 이벤트에서 반응하지 않도록 하려면 어떻게 해야 합니까?

전화할 때$off이벤트 이름만 지정하면 지정된 이벤트에 대해 모든 청취자가 삭제됩니다.

대신 수신 중인 구성 요소에 대해서만 이벤트를 제거하려고 합니다.컴포넌트는 다음과 같습니다.

const component = {
  methods:{
    listener(){
      //do something on event
    }
  },
  created(){
    EventBus.$on('content-type-saving', this.listener)
  },
  beforeDestroy(){
    EventBus.$off('content-type-saving', this.listener)
  }
}

현재 컴포넌트의 특정 리스너만 삭제됩니다.

컴포넌트 렌더링에는 일종의 인덱스를 얻을 수 있는 루프가 있습니다.즉, 인덱스를 배열에 푸시하고 다음으로 eventBus에 푸시할 수 있습니다.$on 함수는 해당 컴포넌트의 인덱스가 어레이(부모 컴포넌트)에 존재하는지 여부를 테스트하고 존재하지 않으면 로직을 실행합니다.

EventBus.$emit('content-type-saving', index);

EventBus.$on('content-type-saving', function(index) {
    if(this.deletedComponentArray.indexOf(index) == -1){
        //execute logic
    }
}

그건 고양이 가죽을 벗기는 방법 중 하나일 뿐이야다른 방법도 있을 거예요.

컴포넌트 방법을 작성하지 않은 다른 솔루션

mounted(){
  const listener = () => {
    // heavy logic
  };

  EventBus.$on('content-type-saving', listener);

  this.$once("hook:beforeDestroy", () => {
     EventBus.$off('content-type-saving', listener);
  });
}

언급URL : https://stackoverflow.com/questions/45399302/stop-receiving-events-from-destroyed-child-component