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)

这样就可以一直打印出来了