Я попытался использовать строку события eventBus
для обратного вызова значения, но не обновил представление
Пожалуйста, не говорите Vuex.
Соответствующий код основан на VueCLi3
Здесь код:
Компонент A:
<template>
<div>
<h2>Component A</h2>
<p>{{item}}</p>
<button @click="push">pushB</button>
</div>
</template>
<script>
import bus from './bus'
export default {
data(){
return{
item:""
}
},
methods:{
push(){
this.$router.push({ path: "/bbb"});
}
},
mounted(){
bus.$on("success-content",(item)=>{
this.item = item;
})
}
}
</script>
Компонент B :
<template>
<div>
<input v-model="content" >
<button @click="sendMsg">pushB</button>
</div>
</template>
<script>
import bus from './bus'
export default {
data () {
return {
content: ''
}
},
methods: {
sendMsg() {
bus.$emit('success-content', this.content)
this.$router.go(-1);
}
}
}
</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
}]
})
Компонент A выполнит функцию обратного вызова $ on, но не обновит представление. Почему это так? Я пытаюсь добавить nextTick
к $on
, все еще не буду обновлять представление
Самоанализ:
При переключении страниц будет генерироваться новое bus
событие. Как я долженсправиться? Я не хочу использовать глобальный bus
.
Можете ли вы помочь мне?