详解vue 组件之间使用eventbus传值

下面是详解vue组件之间使用eventbus传值的完整攻略：

什么是event bus

event bus 是Vue.js内置的一个在组件之间通信的机制，它可以让组件之间的通信变得更加简单方便。event bus是一个可以充当中央事件处理器的实例，可以用它来触发事件、监听事件或广播事件。

在组件中使用event bus

在Vue中使用event bus的步骤：

1.创建event bus

先在vue项目的src目录下新建一个event-bus.js文件（也可以把代码直接写在组件中），并在其中创建一个新的Vue实例，作为event bus。

import Vue from 'vue';
const eventBus = new Vue();
export default eventBus;

在上面代码中，我们创建了一个新的Vue实例，并将其导出，这样其他组件就可以访问它了。

2.发送事件

我们使用 eventBus.$emit('eventName', data) 来发送事件，其中 eventName 和 data 分别表示事件名称和事件携带的数据。

<script>
  import Eventbus from '@/event-bus.js'

  export default {
    methods: {
      handleClick () {
        Eventbus.$emit('updateData', 'Hello, event bus!')
      }
    }
  }
</script>

在这个示例中，我们定义了一个方法 handleClick，当这个方法被调用时，我们会发送一个名为 updateData 的事件，携带的数据为 Hello, event bus!。

3.接收事件

我们使用 eventBus.$on('eventName', callback) 来接收事件，其中 eventName 表示事件名称，callback 表示事件被触发后需要执行的回调函数。

<script>
  import Eventbus from '@/event-bus.js'

  export default {
    data () {
      return {
        message: ''
      }
    },
    mounted () {
      Eventbus.$on('updateData', this.updateMessage)
    },
    methods: {
      updateMessage (data) {
        this.message = data
      }
    }
  }
</script>

在这个示例中，我们通过 Eventbus.$on 方法来监听名为 updateData 的事件，在事件触发后调用 updateMessage 方法来更新数据。

示例1

下面是一个简单的实例，假设A组件需要向B组件发送数据：

在A组件中：

<script>
  import Eventbus from '@/event-bus.js'

  export default {
    methods: {
      emitData () {
        Eventbus.$emit('dataChange', 'Hello, B component!')
      }
    }
  }
</script>

在B组件中：

<template>
  <div>{{ message }}</div>
</template>

<script>
  import Eventbus from '@/event-bus.js'

  export default {
    data () {
      return {
        message: ''
      }
    },
    mounted () {
      Eventbus.$on('dataChange', this.handleDataChange)
    },
    methods: {
      handleDataChange (data) {
        this.message = data
      }
    }
  }
</script>

在上面的示例中，当A组件中的 emitData 方法被执行时，会发出名为 dataChange 的事件，并携带 Hello, B component! 的数据。B组件中的 handleDataChange 方法会监听这个事件，并在事件触发时更新 message 数据。

示例2

下面是一个稍微复杂一点的示例，假设我们需要在一个父组件中给多个子组件传递数据：

在父组件中：

<template>
  <div>
    <child-a />
    <child-b />
    <child-c />
  </div>
</template>

<script>
  import Eventbus from '@/event-bus.js'
  import ChildA from './ChildA.vue'
  import ChildB from './ChildB.vue'
  import ChildC from './ChildC.vue'

  export default {
    components: {
      ChildA,
      ChildB,
      ChildC
    },
    data () {
      return {
        message: 'Hello, all children!'
      }
    },
    mounted () {
      Eventbus.$on('dataChange', this.handleDataChange)
    },
    methods: {
      handleDataChange (data) {
        this.message = data
      }
    }
  }
</script>

在子组件中：

<template>
  <div>{{ message }}</div>
</template>

<script>
  import Eventbus from '@/event-bus.js'

  export default {
    name: 'ChildA',
    data () {
      return {
        message: ''
      }
    },
    mounted () {
      Eventbus.$on('dataChange', this.handleDataChange)
    },
    methods: {
      handleDataChange (data) {
        this.message = data
      }
    }
  }
</script>

在上面的示例中，父组件中定义了三个子组件，当父组件中的 message 数据发生变化时，会触发名为 dataChange 的事件，并携带最新的数据。每个子组件中都监听了这个事件，并在数据变化时更新自己的 message 数据。这样在页面上就可以看到三个不同的子组件都使用了最新的 message 数据。

希望这篇详解vue组件之间使用event bus传值的攻略能够帮助到你。