vue 奇葩问题

Question

今天遇到一个奇葩的问题

我使用bus.js传值

然后兄弟组件里面出现一个很怪的问题，我使用2号模块先制作值，然后3号模块获取，但是获取不到。

我使用3号模块在前就可以。一般逻辑不是得先由2号模块先做好值然后3号回去嘛，怎么现在我3号在前反而能实现呢？？

<template>
  <div>
    <demo-val2></demo-val2>
    <demo-val3></demo-val3>
  </div></template><script>
  import demoVal2 from './demo2.vue'
  import demoVal3 from './demo3.vue'

  export default {    name: '',    components: {
      demoVal2,
      demoVal3
    }
  }</script><template>
  <div>demo2</div></template><script>
  import bus from './bus.js'

  export default {    name: "demo2",
    mounted() {      console.log(2222)
      bus.$emit('val', 'toval')
    }
  }</script><template>
  <div>demo3</div></template><script>
  import bus from './bus.js'

  export default {    name: "demo3",
    mounted() {      console.log(3333)
      bus.$on('val', (data) => {        console.log(data)
      })
    }
  }</script>不显示123


/*******************************************/

交换一下<template>
  <div>
    <demo-val3></demo-val3>
    <demo-val2></demo-val2>
  </div></template>输出123

这是为什么呢？？？？

Answer 1

$on 定义事件$emit 触发事件 你打印的是传过去的值 肯定要在后面执行啊

Answer 2

demo2在上面demo3在下面的时候你是先触发监听再设置监听当然没有任何反应，倒过来就是先设置监听再触发监听就好使了，这个应该和页面的渲染顺序有关系，你可以试着把2放上面3放下面的时候在demo2里面加setTimeout(() => {   bus.$emit('val', 'toval') }, 0)这样就可以一直打印出来了