Прослушивайте пользовательские события для шины в компоненте b. Однако после отправки событий в компоненте a он обращается к компоненту b. функция прослушивания компонента b выполняется, но msg
функции данных не обновляется
Пожалуйста, не говорите Vuex.
Соответствующий код основан на Vue CLi3.
Вот код: Компонент 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>
компонент 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()
роутер :
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
}]
})
Я пробовал использовать часы для наблюдения за сообщением, но это не сработало.
Вы можете мне помочь?
Если возможно, я бы хотел глубоко понять слово «автобус».
mounted
, это означает, что он сможет прослушивать событие только тогда, когда он (компонент B) смонтирован. Это не тот случай, когда вы нажимаете этуpushB
кнопку на компоненте A, поскольку компонент B еще не смонтирован из-за перехода маршрута. - person Abhishek Gupta   schedule 25.10.2019this.$emit
, ноbus.$emit
, гдеbus
- другой экземпляр Vue. - person Abhishek Gupta   schedule 25.10.2019/bbb
, ваше приложение все равно будет работать, поскольку сообщение не является частью параметров запроса и не находится в состоянии памяти. - person Abhishek Gupta   schedule 25.10.2019