在Vue3中使用event bus(事件总线)的步骤详解

// bus.js
 
import mitt from 'mitt';
 
 
const emitter = mitt();
 
 
export default emitter;

// SenderComponent.vue
 
<template>
 
  <button @click="sendMessage">Send Message</button>
 
</template>
 
 
<script>
 
import emitter from './bus';
 
export default {
 
  methods: {
 
    sendMessage() {
 
      emitter.emit('message', 'Hello from SenderComponent');
 
    }
 
  }
 
}
 
</script>
 

npm init vue@latest

npm install mitt

import mitt from 'mitt';
 
const emitter = mitt();
 
export default emitter;

<template>
 
  <button @click="sendMessage">Send Message</button>
 
</template>
 
 
<script>
 
import emitter from '../bus';
 
export default {
 
  methods: {
 
    sendMessage() {
 
      emitter.emit('message', 'Hello from SenderComponent');
 
    }
 
  }
 
}
 
</script>

<template>
  <div>
    <p>Received Message: {{ message }}</p>
  </div>
</template>
 
<script>
import emitter from '../bus';
export default {
  data() {
    return {
      message: ''
    }
  },
 
  mounted() {
    emitter.on('message', (msg) => {
      this.message = msg;
    });
  },
 
  beforeUnmount() {
    emitter.off('message');
  }
}
 
</script>
 

<template>
  <div id="app">
    <SenderComponent />
    <ReceiverComponent />
  </div>
</template>
 
<script>
 
import SenderComponent from './components/SenderComponent.vue';
import ReceiverComponent from './components/ReceiverComponent.vue';
export default {
  components: {
    SenderComponent,
    ReceiverComponent
  }
}
 
</script>