小编Web*_*BGW的帖子

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

我正在尝试将 $emit 事件发送给 root,但它不起作用。当我按下回车键时,它应该发送到 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)
  }
})
Run Code Online (Sandbox Code Playgroud)

HTML:

<div id="parent">
  <p …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vue-component vuejs2

1
推荐指数
1
解决办法
675
查看次数

标签 统计

javascript ×1

vue-component ×1

vue.js ×1

vuejs2 ×1