bus组件传值中的巨坑,第二次才控制台打印,不渲染页面QAQ

两兄弟组件one.vue和two.vue,路由如下:

{
    path: '/di',
    component: Di
  },
  {
    path: '/xiong',
    component: Xiong
  }

bus.js代码如下:

import Vue from 'vue'
var bus = new Vue()
export default bus

哥哥two.vue代码如下:

<template>
  <div>
      <h1>哥哥页面</h1>
      <h4>我叫{{name}}</h4>
      <button @click='toDidi'>发给弟弟</button>
  </div>
</template>

<script>
import bus from '../bus'
export default {
  data () {
    return {
      name: '哥哥'
    }
  },
  methods: {
    toDidi () {
      bus.$emit('toBrother', this.name)
      this.$router.push('/di')
    }
  }
}
</script>

<style>

</style>

弟弟one.vue如下:

<template>
  <div>
      <h1>弟弟页面</h1>
      <h4>我叫{{get}}</h4>
      <h4 v-text="get2"></h4>
      <input type="text" v-model="get">
  </div>
</template>

<script>
import bus from '../bus'
export default {
  data () {
    return {
      get: '',
      get2: ''
    }
  },
  beforeCreate () {
    bus.$on('toBrother', item => {
      console.log(bus)
      console.log(item)
      this.get = item
    })
    // console.log(this.get)
  },
  mounted () {
    this.get2 = this.get
  }

}
</script>

<style>

</style>

但是他就是渲染不出来,bug是第一次控制台不打印,页面不渲染,第二次点击控制台打印,页面不渲染,之后也控制台打印,页面不渲染,老哥救我
示意图

Logo

前往低代码交流专区

更多推荐