我正在尝试将 $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)