门户网站开发建设成本明细百度网站关键词和网址

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

Vue 2 中 $emit 和 $on 的使用

1. 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>

2. 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 用于监听自定义事件