Vue.js 无法向 $root 元素发出事件

Posted 2023-02-23

【中文标题】Vue.js 无法向 $root 元素发出事件

【英文标题】：Vue.js Can't emit event to $root element

【发布时间】：2020-01-12 02:59:30

【问题描述】：

我正在尝试将 $emit 事件发送到 root，但它不起作用。当我按下回车键时，它应该发射到根，组件应该获取该事件并执行将其推送到数组的函数。

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>

【参考方案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)
    

【讨论】：

是的，但我需要使用 $root。如果我会有更多的嵌套组件怎么办