javascript - VueJS $emit 和 $on 不能在一个组件中工作到另一个组件页面
问题描述
我正在尝试长时间使用 Vue$emit
和$on
功能,但我仍然没有得到任何解决方案。我只创建了两个页面的简单消息传递页面。一个是Component Sender
and和Component Receiver
添加eventbus
的功能。$emit
$on
我声明$emit
了$on
功能,但我不知道我在哪里犯了错误。
请帮助一些人。
组件发送者:
<script>
import { EventBus } from '../main';
export default {
name: 'Send',
data () {
return {
text: '',
receiveText: ''
}
},
methods: {
sender() {
EventBus.$emit('message', this.text);
this.$router.push('/receive');
}
}
}
</script>
组件接收器:
<script>
import { EventBus } from '../main';
export default {
name: 'Receive',
props: ["message"],
data () {
return {
list: null
}
},
created() {
EventBus.$on('message', this.Receive);
},
methods: {
Receive(text){
console.log('text', text);
this.list = text;
},
save() {
alert('list', this.list);//need to list value but $emit is not working here
}
}
}
</script>
路由器视图:
const router = new Router({
mode: 'history',
routes: [
{
path: "/",
name: "Send",
component: Send
},
{
path: "/receive",
name: "Receive",
component: Receive,
props: true
}
]
})
主.JS
import Vue from 'vue'
import App from './App.vue'
import router from './router';
export const EventBus = new Vue();
new Vue({
el: '#app',
router,
render: h => h(App)
})
解决方案
那么你的错误就在这里:
created() {
EventBus.$on('message', this.Receive);
},
第二个参数是一个处理程序,它应该如下所示:
created() {
EventBus.$on('message', function(data){
this.Receive(data);
console.log(data)
});
},
您现在应该看到 2console.log()
条消息
推荐阅读
- r - 如何更正一个简单的函数:获取错误替换的长度为零
- java - 尝试使用 Maven 解决多个存储库中缺少的依赖项
- javascript - 转换嵌套对象
- dryioc - 注册一个服务,以便 Resolve(args) 将 args 作为愚蠢的位置参数传递?
- python - Django 为 ordering_fields 使用计算字段
- cordova - 防止包含 target=“_blank” 链接的 iframe 接管应用程序
- pandas - 使用 DateOffset 重新采样可以给出 NotImplementedError
- redis - BITOP NOT 在 Redis 5.0.5 中无法正常工作
- php - Laravel 6.3.0 + Apache2 - 内核加载后连接被重置
- timezone - Jekyll:欧洲的周数