は、その中に私がemitingやって、別の

Question

私が持っているコンポーネントに1子から発することができません良い。しかし、sendCode()をクリックすると、3番目のコンポーネントにデータを送信したいと思います。第3のコンポーネントコード：

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があります。