Vue总线Bus兄弟组件传参

一、前言

   使用场景：在vue项目较小的情况，使用bus总线思路来完成vuex的传值功能。

二、内容

、、、

//util.js

export default class Bus {

  constructor() {

    this.callbacks = {}

  }

  $on(name, fn) {

    this.callbacks[name] = this.callbacks[name] || []

    this.callbacks[name].push(fn)

  }

  $emit(name, args) {

    if (this.callbacks[name]) {

      // 存在 遍历所有callback

      this.callbacks[name].forEach(cb => cb(args))

    }

  }

}

//mai.js

import Bus from './utils/bus'

Vue.prototype.$bus = new Bus()

//组件A

this.$bus.$on('log', content => {

      console.log(content)

    })

//组件B

this.$bus.$emit('log', 120)

//父组件

<template>

  <div class="home">

    <demo1 :msg1="msg111" />

    <demo2 :msg2="msg222" />

  </div>

</template>

、、、

总结：

    Vue-Bus是一种总线思想，即各个兄弟组件通过Bus（即Vue实例）进行参数传递！