我正在尝试将 $emit 事件发送给 root,但它不起作用。当我按下 enter 键时,它应该发送到 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>
最佳答案
我建议在没有 $root 的情况下发出事件,如下所示:
methods : {
pushMessages : function(){
this.$emit('message', { message: this.textData })
}
}
并在父组件中处理它:
<input-comp @message="pushMessages"></input-comp>
或者尝试使用 mounted
钩子(Hook)而不是 updated
:
mounted(){
this.$root.$on('message', this.pushMessages)
}
关于javascript - Vue.js 无法向 $root 元素发出事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57869326/