vuej에서 여러 하위 구성 요소에서 발생하는 이벤트를 캡처할 수 있는 방법이 있는가?

vuej에서 여러 하위 구성 요소에서 발생하는 이벤트를 캡처할 수 있는 방법이 있는가?

여러 자식 구성 요소를 포함하는 부모 구성 요소가 있음

<grid>
   <cell></cell>
   <cell></cell>
   <cell></cell>
</grid>

내 셀 구성 요소가 편집 중이라는 페이로드와 함께 이벤트를 내보내는 경우this.$emit('editing',cellId)

나는 내가 이벤트를 다음과 같이 캡처할 수 있다는 것을 안다.<cell @editing="do something"></cell>또는 다음 명령을 사용하여 캡처EventBus.$on('editing'), 루트 리스너도 사용하고 싶지 않다.this.$root.$on('editing')

그러나 모성분이기 때문에 모성분이 장착되었을 때 어떻게 '편집'의 이벤트를 들을 수 있는가?

mounted: function(){
    this.$on('editing',dosomething)
}

상위 구성 요소가 마운트되었을 때 수신 대기 기능을 추가할 수 없는 이유

누락된 주요 차이점은 사용자 정의 이벤트 섹션에 설명되어 있다.

또한 상위 구성 요소는 하위 구성 요소가 사용되는 템플릿에서 직접 v-On을 사용하여 하위 구성 요소에서 방출되는 이벤트를 청취할 수 있다.

아이들이 내보내는 이벤트를 듣기 위해 $on을 사용할 수 없다.아래 예시와 같이 템플릿에서 직접 v-On을 사용해야 한다.

이것이 의미하는 바는 자녀와 부모 간의 의사소통은 지시를 통해 이루어지며, 자녀와 부모 사이의 의사소통을 통해 이루어져야 한다는 것이다.v-on(또는)@edit) way.

여기 예시

mounted: function(){
    this.$on('editing',dosomething)
}

사실 효과가 없을 겁니다.배출 문서에는 다음과 같이 언급되어 있다.

현재 인스턴스에서 이벤트 트리거

즉, 동일한 구성 요소 내에서this.$on잘 될 거야하지만 만약 당신이 그것을 부모에서 사용하기를 원한다면, 당신은 그것을 바인딩하기 위해 인라인 명령을 사용해야 한다. 그렇지 않으면 그것은 작동하지 않을 것이다.

또한 명심하라.emits부모가 그것을 잡을 수 있다는 것을 의미하는 단 한 단계에서만 작동한다.하위 -> 하위 -> 하위 -> 상위 항목을 내보내야 하는 경우, 다음에서 이벤트를 잡아야 한다(인라인 바인딩 사용).subchild 에 child그리고 부모에게 돌아가도록 다시 재조정한다.

자식-부모 범위 밖에 있는 경우, 소위 말하는 것을 사용해야 한다.a global bus. 기본적으로 모든 것을 하나의 인스턴스로 좁히는데, 그것은emits그리고listens무슨 일이 있어도그러면 그들은 더 이상 아이-부모가 아니거나 어떤 종류의 연관성이 있는 것이 아니라, 그들은 모두 같은 상황에 놓이게 되고, 따라서 당신은 항상 그것들을 당신의 모든 구성 요소에 사용할 수 있다.

요컨대, 탑재된 상태에서 청취하는 당신의 접근법은 효과가 없을 것이다.그것이 도움이 되기를 바라 :)

각 아이의 말을 듣는 것과 EventBus를 듣는 것의 차이는 다음과 같다.

• 이런 이벤트를 할 때this.$emit('event') the event will be fired only for the parent component.
• 같은 EventBus를 할EventBus.$emit('event') then your event will be sent to all the components

각 요소마다 장단점이 있다; EventBus는 해당 이벤트를 사용하지 않는 구성 요소에 이벤트를 보낼 수 있으며(Event Polution이 될 수 있음), 상위 이벤트 이미터는 EventBus로 사용하기에는 그다지 우아하지 않을 수 있다.
그래서 당신은 어떤 접근법이 당신에게 좋은지 결정한다.

TL;DR 나 스스로 이 문제를 우연히 발견했다.다른 한 사람이 말한 것처럼, 부모로부터 이벤트 청취자를 바인딩하고 싶을 때, v-on을 사용해야 한다. 왜냐하면, 음... 당신은 그가 아이처럼 무언가를 바인딩하고 있기 때문이다.그래서 실제 콜백은 그 아이가 그 사건이 해결되었다는 것을 감지했을 때 그 아이가 실행한다.

아동용에서this.$parent.$emit('event-name');
상위 사용에서

mounted: function() {
    this.$on('event-name', function() {console.log('test')});
}  

위의 내용은 부모에서 이벤트를 트리거할 수 있도록 해 주므로 부모에서 $on을 사용하여 자녀에 의해 트리거된 이벤트에 응답할 수 있다.

참조URL: https://stackoverflow.com/questions/45177171/is-there-a-way-to-capture-events-emitted-by-multiple-child-components-in-vuejs