Vue.js事件总线实现组件通信的实战指南

2024-03-01 11:30:41

利用Vue.js事件总线实现组件间通信

背景

在Vue.js应用中，组件之间的通信是一个常见的需求。为了实现这种通信，我们可以使用多种方法，其中一种是使用事件总线。事件总线是一个全局对象，允许组件在彼此之间传递事件。

事件总线的创建

首先，我们需要创建一个事件总线。我们可以使用Vue.prototype.$bus来创建它：

import Vue from 'vue'

Vue.prototype.$bus = new Vue()

在父组件中触发事件

在父组件中，我们可以使用$bus触发一个事件，并传递参数：

this.$bus.$emit('send-variable', { url })

在子组件中监听事件

在子组件中，我们可以使用$on方法监听父组件触发的事件：

mounted() {
  this.$on('send-variable', (data) => {
    // 接收参数
    const { url } = data
    // 使用参数
    console.log(url)
  })
}

示例代码

父组件 (TimeLine.vue)：

<template>
  <!-- ... -->
</template>

<script>
import Vue from 'vue'

export default {
  computed: {
    optionsData() {
      // ...

      groupTemplate: (item, element, data) => {
        // ...

        // click
        i.addEventListener('click', () => {
          // ...
          const url = `/shop/${this.selectedShopId}/room/${itemId}/suspend_memo`
          console.log('Timeline of URL’, url)
          this.$bus.$emit('send-variable', { url })
        })
      }
    }
  }
}
</script>

子组件 (SuspendedMemo.vue)：

<template>
  <!-- ... -->
</template>

<script>
import Vue from 'vue'

export default {
  mounted() {
    this.$on('send-variable', (data) => {
      const { url } = data
      console.log(url)
    })
  }
}
</script>