Vue.js無法向$ root元素發出事件

Question

我試圖將$ emit事件植根，但無法正常工作。 當我按下回車鍵時，它應該發出到根目錄，而組件應該得到該事件並執行將其推入數組的函數。

JS：

Vue.component('input-comp',{
  template : `
       <div>
        <input type="text" v-model ="textData" v-on:keyup.enter ="pushMessages"/>
        <button v-on:click="pushMessages">Send text</button>
       </div>`,
  data : function(){
     return {
         textData : 'test Message'
     }
  },
  methods : {
    pushMessages : function(){
      this.$root.$emit('message', { message: this.textData })
    }
  }
})

var vm =  new Vue({
    el : '#parent',
    data : {
      msgs : []
    },
    methods : {
      pushMessages : function(payload){
          this.msgs.push(payload.message)
      }
    },
  updated(){
    this.$root.$on('message', this.pushMessages)
  }
})

HTML：

<div id="parent">
  <p v-for="msg in msgs">{{msg}}</p>
  <input-comp></input-comp>
</div>

Answer 1

我建議不使用$ root發出事件，如下所示：

 methods : {
    pushMessages : function(){
        this.$emit('message', { message: this.textData })
    }
  }

並在父組件中按如下方式處理：

      <input-comp @message="pushMessages"></input-comp>

或嘗試使用mounted鈎子而不是updated鈎子：

  mounted(){
     this.$root.$on('message', this.pushMessages)
    }