关于Vue23的emit和on发布订阅模式

2025-03-09 约 1222 字预计阅读 3 分钟

https://bing.ee123.net/img/rand?artid=146130730

关于Vue2&3的$emit和$on发布订阅模式

$emit 和 $on 是 Vue.js 中用于实现组件间通信的方法，不过它们在 Vue 2 和 Vue 3 中的使用场景和方式略有不同，下面分别进行介绍

Vue 2 中 $emit 和 $on 的使用

emit
作用： emit 主要用于子组件向父组件传递数据
子组件通过触发自定义事件，并携带数据，父组件监听这个自定义事件来接收数据
子组件 ：在子组件中使用 this.$emit('eventName', data) 触发自定义事件

<!-- Child.vue -->
<template>
  <button @click="sendData">发送数据给父组件</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      const data = '这是子组件传递的数据';
      this.$emit('customEvent', data);
    }
  }
};
</script>

父组件 ：在父组件中使用 v-on 指令监听子组件触发的自定义事件

<!-- Parent.vue -->
<template>
  <div>
    <Child @customEvent="handleEvent" />
    <p>接收到的数据: {{ receivedData }}</p>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      receivedData: ''
    };
  },
  methods: {
    handleEvent(data) {
      this.receivedData = data;
    }
  }
};
</script>

on
作用： on 用于监听自定义事件，通常结合事件总线（ Event Bus ）实现非父子组件间的通信
事件总线是一个空的 Vue实例 ，充当事件的发布者和订阅者之间的桥梁
创建事件总线

// eventBus.js
import Vue from 'vue';
export const eventBus = new Vue();

发送事件 ：在发送数据的组件中引入事件总线，并使用 $emit 触发自定义事件

<!-- Sender.vue -->
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
import { eventBus } from './eventBus.js';

export default {
  methods: {
    sendMessage() {
      const message = '这是一条消息';
      eventBus.$emit('messageEvent', message);
    }
  }
};
</script>

接收事件 ：在接收数据的组件中引入事件总线，并使用 $on 监听自定义事件

<!-- Receiver.vue -->
<template>
  <p>接收到的消息: {{ receivedMessage }}</p>
</template>

<script>
import { eventBus } from './eventBus.js';

export default {
  data() {
    return {
      receivedMessage: ''
    };
  },
  created() {
    eventBus.$on('messageEvent', (message) => {
      this.receivedMessage = message;
    });
  }
};
</script>

Vue 3 中 $emit 和 $on 的使用

1. $emit

作用：和 Vue 2 一样，用于子组件向父组件传递数据，但在 Vue 3 的组合式 API 中，使用 defineEmits 来声明要触发的事件

子组件

<template>
  <button @click="sendData">发送数据给父组件</button>
</template>

<script setup>
import { defineEmits } from 'vue';

const emits = defineEmits(['customEvent']);

const sendData = () => {
  const data = '这是子组件传递的数据';
  emits('customEvent', data);
};
</script>

父组件 ：和 Vue 2 类似，使用 v-on 指令监听自定义事件

<template>
  <div>
    <Child @customEvent="handleEvent" />
    <p>接收到的数据: {{ receivedData }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const receivedData = ref('');

const handleEvent = (data) => {
  receivedData.value = data;
};
</script>

2. $on

说明：在 Vue 3 中，官方推荐使用 mitt 或 EventEmitter 等第三方库来替代 Vue 2 中的事件总线。不过，如果你使用的是选项式 API，仍然可以使用类似 Vue 2 的方式创建事件总线并使用 $on 和 $emit。如果使用组合式 API，通常会使用第三方库来实现非父子组件间的通信

安装 mitt 试例

npm install mitt

创建事件总线

// eventBus.js
import mitt from 'mitt';
export const eventBus = mitt();

发送事件

<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script setup>
import { eventBus } from './eventBus.js';

const sendMessage = () => {
  const message = '这是一条消息';
  eventBus.emit('messageEvent', message);
};
</script>

接收事件

<template>
  <p>接收到的消息: {{ receivedMessage }}</p>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { eventBus } from './eventBus.js';

const receivedMessage = ref('');

const handleMessage = (message) => {
  receivedMessage.value = message;
};

onMounted(() => {
  eventBus.on('messageEvent', handleMessage);
});

onUnmounted(() => {
  eventBus.off('messageEvent', handleMessage);
});
</script>

综上所述 ：

$emit 主要用于子组件向父组件传递数据，而 $on 用于监听自定义事件