Vue3.0 Bus总线实现组件间通信和传参

前端

2024-01-31 07:30:20

在本文中，我们将学习如何在Vue3.0中使用Bus总线来实现组件之间的通信和传参。我们将使用mitt库来创建Bus，它使我们能够轻松地发出和监听事件，并允许组件之间传递数据。

什么是Bus总线？

Bus总线是一种通信模式，它允许组件之间进行通信，而无需直接耦合。这使得组件更加独立和可重用。

为什么使用Bus总线？

使用Bus总线有许多好处，包括：

组件之间解耦：组件之间不必直接耦合，这使得它们更加独立和可重用。
代码更易于维护：由于组件之间是解耦的，因此代码更容易维护和扩展。
提高性能：Bus总线可以提高性能，因为组件之间不需要直接通信。

如何使用Bus总线？

为了使用Bus总线，我们需要先创建一个Bus实例。我们可以使用mitt库来创建Bus，它是一个轻量级的事件库。

import mitt from 'mitt';

const bus = mitt();

创建Bus实例后，就可以使用它来发出和监听事件。

// 发出事件
bus.emit('event-name', data);

// 监听事件
bus.on('event-name', (data) => {
  // 处理数据
});

在Vue3.0中使用Bus总线

在Vue3.0中，我们可以使用mitt库来创建Bus，并将其注入到组件中。

import mitt from 'mitt';

const bus = mitt();

export default {
  data() {
    return {
      bus: bus,
    };
  },
};

然后，我们就可以在组件中使用Bus来发出和监听事件。

<template>
  <div>
    <button @click="emitEvent">Emit Event</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const emitEvent = () => {
      bus.emit('event-name', count.value);
    };

    return {
      count,
      emitEvent,
    };
  },
};
</script>

在另一个组件中，我们可以使用Bus来监听事件。

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

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('');

    bus.on('event-name', (data) => {
      message.value = data;
    });

    return {
      message,
    };
  },
};
</script>