vue-兄弟组件传值

Posted 2020-12-21 unfetteredman

兄弟组件之间传值：

　　兄弟之间的传递数据需要借助于事件中心，通过事件中心传递数据提供事件中心 var hub = new Vue()

　　传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)

　　接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名

　　销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据

  <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>