Как использовать значение обратного вызова строки события eventBus в модели VueRouter? - PullRequest
0 голосов
/ 30 октября 2019

Я попытался использовать строку события 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.

Можете ли вы помочь мне?

...