vue-兄弟组件传值

  <div id="app">
    <!-- 注册两个全局组件 -->
    <Tom></Tom>
    <Jerry></Jerry>
  </div>
  <script>
    const eventBus = new Vue()
    // 组件Tom
    Vue.component(‘Tom‘,{
      // tom组件中定义一个自定义函数
      template:`<div>Tom：{{num}}<button @click="handle">click</button></div>`,
      data:function(){
        return{
          num:0
        }
      },
      methods:{
        handle(){
          // 通过自定义事件，用eventBus这个事件总线来调用$emit来触发Jerry组件中的事件
          eventBus.$emit(‘Jerry-box‘,5)
        }
      },
      mounted:function(){
        // 通过事件总线来添加一个添加事件，val为兄弟组件传递的参数
        eventBus.$on(‘Tom-box‘,val=>{
          this.num+=val;
        })
      }
    })
    // 组件Jerry
    Vue.component(‘Jerry‘,{
      template:`<div>Jerry{{num}}<button @click="handle">click</button></div>`,
      data:function(){
        return{
          num:0
        }
      },
      methods:{
        handle(){
          eventBus.$emit(‘Tom-box‘,2)
        }
      },
      mounted:function(){
        eventBus.$on(‘Jerry-box‘,val=>{
          this.num+=val;
        })
      }
    })
    const vm = new Vue({
      el:"#app",
    })
  </script>