你如何通过 eventBus 总线将更新传送到 Vue 组件中的视图? [英] How do you eventBus a bus to communicate updates to a view in a Vue component?
问题描述
侦听组件 b 中总线的自定义事件.但是，在组件 a 中调度事件后，它访问组件 b.组件b的监听函数执行了，但是数据函数的msg没有更新
请不要说Vuex.
相关代码基于Vue CLi3
这里的代码:组件A:
<模板><div>组分 A<button @click="sendMsg">pushB</button><脚本>从'./bus'导入总线导出默认{方法: {发送消息(){bus.$emit('send', '你好组件B')this.$router.push('/bbb')}}}
组件B:
<div><p>组件B:{{ msg }}</p><script type="text/javascript">从'./bus'导入总线导出默认{数据 () {返回 {msg: 'bb'}},挂载(){bus.$on('send', data => {控制台日志(数据)控制台日志(这个)this.msg = 数据})}}
bus.js
从'vue'导入Vue；导出默认的新 Vue()路由器:
const aaa = () =>导入('@/components/demo/bus/a')const bbb = () =>导入('@/components/demo/bus/b')导出默认的新路由器({路线:[{路径:'/aaa'，成分:aaa},{路径:'/bbb',成分:bbb}]})我尝试使用 'watch' 来观察 'msg'，但是没有用.
你能帮我吗?
如果可以，我想深入了解'bus'
这仅在您发出时页面中同时存在组件 A 和组件 B 时才有效.从代码来看，您似乎是从组件 A 发出值，然后导航到组件 B 并期望那里的值.
你正在做的事情就像踢一个球，然后追着它跑，然后捡起来却发现球已经消失了.您需要的是另一个已经在在该位置接球的人.
这种情况下的解决方案可以是在 localstorage 中设置值，导航到另一条路由，然后从 localstorage 中读取值.
如果您需要传递的值是一个简单的值，您可以将其传入查询字符串，然后从组件 B 中的 $router params 中读取.
Listen for custom events for the bus in component b. However, after dispatching events in component a, it accesses component b. the listening function of component b is executed, but msg of data function is not updated
Please don't say Vuex.
The relevant code is based on Vue CLi3
Here code: Component A:
<template>
<div>
Component A
<button @click="sendMsg">pushB</button>
</div>
</template>
<script>
import bus from './bus'
export default {
methods: {
sendMsg() {
bus.$emit('send', 'hello Component B')
this.$router.push('/bbb')
}
}
}
</script>
component B：
<template>
<div>
<p>component B：{{ msg }}</p>
</div>
</template>
<script type="text/javascript">
import bus from './bus'
export default {
data () {
return {
msg: 'bbb'
}
},
mounted () {
bus.$on('send', data => {
console.log(data)
console.log(this)
this.msg = data
})
}
}
</script>
bus.js
import Vue from 'vue';
export default new Vue()
router：
const aaa = () => import('@/components/demo/bus/a')
const bbb = () => import('@/components/demo/bus/b')
export default new Router({
routes: [{
path: '/aaa',
component: aaa
},
{
path: '/bbb',
component: bbb
}]
})
I tried using 'watch' to observe 'msg', but it didn't work.
Can you help me?
If possible, I would like to deeply understand 'bus'
This will work only if both component A and component B are present in the page at the time you are emitting. From the code it seems that you are emitting the value from component A and then navigating to component B and expecting the value there.
What you are doing is something like kicking a ball and then running after it and then picking it only to find that the ball has disappeared. What you need is another person already present at that location who picks up the ball.
A solution in this case can be to set the value in localstorage, navigate to the other route and then read the value from localstorage.
If the value you need to pass is a simple value, you can just pass it in query string and then read from $router params in component B.
这篇关于你如何通过 eventBus 总线将更新传送到 Vue 组件中的视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
