Как вы организуете автобус для передачи обновлений в представление в компоненте Vue? - PullRequest
Новая
       39

Как вы организуете автобус для передачи обновлений в представление в компоненте Vue?

0 голосов
/ 25 октября 2019

Прослушивание пользовательских событий для шины в компоненте 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()

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
    }]
})

Я пытался использовать «watch», чтобы наблюдать «msg», но это не сработало.

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

Если возможно, я бы хотел глубоко понять «автобус»

...