javascript - Vue.js 无法向 $root 元素发出事件
问题描述
我正在尝试将 $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>
解决方案
我建议在没有 $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)
}
推荐阅读
- data-warehouse - 如何获得正确的表作为具有相关键的事实表?(星型模式)
- java - 这个语法“搜索:”在java中是什么意思
- mysql - 选择但跳过某些行的 SQL 查询
- ios - 使用 Objective c 和 SwiftUI 解密 iOS
- r - r闪亮的sliderInput具有精确值而不是均匀划分的范围
- python - 通过蓝牙发送传感器数据和流视频(Raspberry Pi 到 PC)
- python - 如何将列一一放置以在python中形成矩阵
- json - 我无法在 json 模型类中解决的奇怪错误
- amazon-cognito - 适用于 Slack 克隆的 AWS Cognito
- java - 我们如何使用 Java 更改 JSON 对象的顺序?