不能從一個孩子發出另一個

Question

我有分量，裏面我做冒落：

methods: { 
    sendClick(e) 
    { 
     bus.$emit('codechange', this.mycode); 
     console.log(this.selectedLanguage); 
     this.$parent.sendCode(); 
     this.$parent.changeView(); 
    } 

} 

在父組件我hadling數據：

var app = new Vue({ 
    el: '#app', 
    data: { 
    currentView: 'past-form', 
    mycode: '' 
    }, 
    methods: 
    { 
    changeView() 
    { 
     console.log(this.mycode); 
    }, 

    sendCode() 
    { 
     console.log("Code is sended to server"); 
     this.currentView = 'view-form'; 
     bus.$emit('codechange', this.mycode); 
    } 

    }, 

    created() 
    {   
    bus.$on('codechange', function(mycode){ 
    console.log("test"); // this works 
    this.mycode = mycode; // this works 
    }.bind(this)); 

    } 

}) 

處理在父母工作精細。但點擊sendCode()我想發送數據到第三個組件。第三個組件代碼：

Vue.component('view-form', { 
    template: ` 
     <div class="ViewCodeContainer"> 
      <div class="ViewCode">my code here</div> 
      <code> {{mycode}} </code> 
      <div class="ViewCodeMenu">my menu here</div> 
     </div>`, 
     data() { 
      return { 
       mycode: '' 
      } 
     }, 
    created() 
     {  
      bus.$on('codechange', function(mycode){ 
      console.log("hererere"); 
       console.log(mycode); 
      this.mycode = mycode; 
      }.bind(this)); 
      console.log("test"); 
     } 
}) 

但是，處理代碼不起作用。塊console.log("hererere");未執行。我做錯了什麼？

Answer 1

@Wostex在這種情況下是正確的。本質上，當事件發出時，您的view-form組件不存在。直到您更改視圖，您在事件處理程序中執行的視圖纔會存在。所以沒有辦法讓它接收事件，因爲你的處理程序不存在。

如果您的動態組件是父級的子級，只需將代碼作爲屬性傳遞即可。

<component :is="currentView" :mycode="mycode"></component> 

並更新您的view-form組件。

Vue.component('view-form', { 
    props:["mycode"], 
    template: ` 
    <div class="ViewCodeContainer"> 
     <div class="ViewCode">my code here</div> 
     <code> {{code}} </code> 
     <div class="ViewCodeMenu">my menu here</div> 
    </div>`, 
    data() { 
    return { 
     code: this.mycode 
    } 
    } 
}) 

這是一個工作example。