두 번째 호출 후 Vue2 이벤트 버스 작동

Question

중첩 구성 요소가 있고 하위 구성 요소가 주 인스턴스에서 매개 변수를 받아야하지만 문제는 매개 변수를 두 번 가져와 이벤트를 호출해야한다는 것입니다.

index.html을

<div id="app"> 
    <button @click="displayComponent">Display</button><br/><hr/> 
    {{ message }} 

    <mycomponent v-if="showComponent" @hide="hideComponents"></mycomponent> 
</div> 

code.js

window.bus = new Vue(); 

Vue.component('mycomponent', { 
    template: ` 
     <div> 
      <h3>Im the parent component</h3> 
      <childcomponent></childcomponent> 
      <button @click="$emit('hide')">Hide components</button> 
     </div> 
    ` 
}); 

Vue.component('childcomponent', { 
    template:` 
     <div> 
      <h4>Im the child component</h4> 
      <p>{{ data }}</p> 
     </div> 
    `, 

    data() { 
     return { 
      text: 'Nothing loaded' 
     }; 
    }, 

    methods: { 
     test() { 
      alert('hello'); 
     }, 

     getData(x) { 
      this.text = x; 
     } 
    }, 

    created(){ 
     bus.$on('extraCall', data => { 
      this.getData(data); 
      this.test(); 
     }); 
    } 
}); 

const app = new Vue({ 
    el: '#app', 

    data: { 
     message: 'hello world!', 
     showComponent: false 
    }, 

    methods: { 
     displayComponent() {   
      bus.$emit('extraCall', 'this is some extra text'); 
      this.showComponent = true; 
     }, 

     hideComponents() { 
      this.showComponent=false; 
     } 
    } 
}); 

디스플레이 버튼을 클릭 한 후 하위 구성 요소 내부의 텍스트 값은 기본값으로 설정되어가 함께 bus.$emit를 발생 일부 텍스트를 매개 변수로 사용하는 extraCall 이벤트의 경우 텍스트 값을 업데이트해야하며 표시 버튼을 두 번째 클릭 한 후에 만 ​​발생합니다.

무엇이 누락 되었습니까? 때문에 표시 단추를 클릭 할 때

Answer 1

<mycomponent> (및 해당 자식 <childcomponent>)이 인스턴스화되지 않습니다.

먼저 클릭 :

1. extraCall 버스에 방출되지만 무시되도록 청취자는 이벤트가 없습니다.
2. <mycomponent>은 showComponent을 true로 설정 한 후에 인스턴스화됩니다.
3. <mycomponent>은 created 후크에 extraCall 이벤트에 대한 수신기를 등록합니다.

번째 클릭

1. extraCall 버스에서 출사되고 <mycomponent>는 그것을 처리한다.

당신은 bus.$emit() 및 this.showComponent = true 라인 <mycomponent> 이벤트가 방출되는 전에 의 인스턴스를 가져옵니다 그래서 교환되어야하지만 뷰는 다음 microtask 때까지 구성 요소의 생성을 연기 때문에 여전히 작동하지 않을 생각

보기가 갱신됩니다.

이 작동 할 수 있습니다 :

displayComponent() { 
    this.showComponent = true; 

    // Wait for child component to be instantiated 
    this.$nextTick(() => { 
    bus.$emit('extraCall', 'this is some extra text'); 
    }); 
} 

을 위의 코드는 당신을 위해 작동하는 경우, 나는 아직도 정말 생각하지 않는 것이 좋습니다. 이벤트를 보내기 전에 하위 구성 요소의 생성을 설명 할 필요는 없습니다. 구성 요소를 함께 연결합니다. 데이터를 다른 방식으로 공유하고 다른 SO 질문을 확인하여 구성 요소간에 데이터를 공유하는 가장 좋은 방법을 찾아야합니다.