极客观点
研发管理
HarmonyOS
我在 app.vue 里写了这么一个结构，打算通过 v-bind:is="view" 来切换不同的页面。
大概的结构是这样的：
app.vue
/ \
/ \
login.vue chat.vue
|
|
contentbox.vue现在，我需要在 login.vue 上，向 contentbox.vue 发送一个数据，于是我使用事件来传递数据，通过 vm.$dispatch 和 vm.$broadcast 来往上和往下传播事件。
但是，当我在 login.vue 上把 app.vue 的 view 切换到 chat.vue 后，我发现 chat.vue 并不能接收到我传递的事件，更无法传递到 contentbox.vue。
不明白这哪里出错了，或者大家有没有别的方法来传递数据呢？请各位指教指教。
以下是代码：
app.vue
<template>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<component v-bind:is="view"></component>
</div>
</div>
</template>
<script>
module.exports = {
events: {
test: function (data) {
// app.vue 接收到下层传上来的 test 后，往下广播 test 事件
console.log('app.vue: got it.')
this.$broadcast('test', data)
return false
}
}
}
</script>login.vue
<script>
module.exports = {
ready: function(){
// 监听 socket.io 的 login-success 事件
this.$root.socket.on('login-success', function(data){
this.$parent.view = 'chat'
history.pushState null, null, '#/chat'
// 切换页面后向上传播 test 事件
console.log('login.vue:sent')
this.$dispatch('test', data)
})
}
}
</script>chat.vue
<template>
<inputbox></inputbox>
<contentbox></contentbox>
</template>
<script>
module.exports = {
events: {
test: function (data) {
console.log('chat.vue: got it.') // 并不能收到
}
}
}
</script>contentbox.vue
<script>
module.exports = {
events: {
test: function (data) {
console.log('contentbox.vue: got it!') // 当然也到不了这里
console.log('data:', data)
return false
}
}
}
</script>
采纳的答案有点答非所问，最恰当的答案应该是 HelloVirus 的。
在此补充下 HelloVirus 没说明的：
history.pushState后立即执行this.$dispatch('test', data)这时子组件可能还未渲染，更谈不上绑定事件及监听到 test 事件了！将广播事件的逻辑放在
$nextTick触发，即可以保证完成切换组件后子组件响应指定事件。