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

灰太狼 2021-07-24 20:37 396阅读 0赞

## 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是第一次控制台不打印，页面不渲染，第二次点击控制台打印，页面不渲染，之后也控制台打印，页面不渲染，老哥救我  
![示意图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjE3MjU4_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjE3MjU4_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200508013959567.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjE3MjU4,size_16,color_FFFFFF,t_70#pic_center