Vue 구성 요소 사용 사례 $

모든 Vue 인스턴스에서 사용할 수있는 .$on(...) 메서드를 사용하는 방법이 명확하지 않습니다. 아마도 이벤트가 방출되어 동일한 Vue 구성 요소 (?)에 의해 소비되지만 현재는 많은 것을 상상할 수없는 유스 케이스가 없을 것이라고 확신합니다. 또한,이 배선은 어디에 수행 될 것인가? 라이프 사이클 방식일까요?

내 문제 : 다른 구성 요소에 대한 상호 작용을 기반으로보기를 변경하는 관련이 없습니다 (즉, 형제가 아닌, 비 종속 또는 비 일반 부모) 구성 요소입니다. 그리고 $on(...)은 내 목적을 돕지 않는 것 같습니다.

그리고 프레임 워크에서 어떻게/왜 .$on(..)을 사용할 수 있는지 이해할 필요가 있습니다. 고맙습니다.

출처

2017-11-18 82Tuskers

CommunicationHub - 일반 mixin, 부모가 아닌 부모 < -> 하위 통신 (예 : 귀하의 경우)의 구현에 $on- 메소드를 사용할 수 있습니다.

예를 들어 두 개의 Vue 루트 응용 프로그램이 있습니다 (RootAppA 및 RootAppB). 와,

let CommunicationHub = new Vue(); 

Vue.mixin({ 
    data: function() { 
    return { 
     communicationHub: CommunicationHub 
    } 
    } 
});

지금 당신이 RootAppA에서 $emit -method와 사용자 정의 이벤트를 방출하여 데이터를 보낼 수 있으며, RootAppB이 이벤트에 가입하여이 데이터를 얻을 : 그들 사이의 의사 소통을하려면 다음 코드를 CommunicationHub 믹스 인을 만들 수 있습니다 방법 $on : 그런데

let RootAppA = { 
    methods: { 
    sendData(){ 
     this.communicationHub.$emit('customEvent', {foo: 'bar', baz: 1, comment: 'custom payload object'}); 
    } 
    } 
} 

let RootAppB = { 
    created(){ 
    this.communicationHub.$on('customEvent', (payload) => { 
     console.log(payload); //{foo: 'bar', baz: 1, comment: 'custom payload object'} 
    }); 
    } 
}

는 CommunicationHub 패턴이 더 큰 애플 리케이션을위한 매우 유연한 솔루션이 아니라고 언급 해주십시오. 따라서 응용 프로그램이 자랄 경우 Vuex -library (previous so-answer의 예제 참조)

을 사용하는 것이 좋습니다.

출처

2017-11-18 14:29:48 hedin

Vue 구성 요소 사용 사례 $

답변

관련 문제