Vue EventBus事件侦听（$on、$emit、$off、$once）

最新推荐文章于 2024-08-15 10:31:28 发布

书院二层楼

最新推荐文章于 2024-08-15 10:31:28 发布

阅读量8.3k

点赞数 2

分类专栏： Vue 文章标签： Vue 事件侦听EventBus on-emit once-off

本文链接：https://blog.csdn.net/caoxinjian423/article/details/108965056

版权

本文通过实例代码介绍了Vue中EventBus事件通信的使用，包括$on监听事件、$emit触发事件、$off移除监听以及$once一次性监听，涉及组件间的通信与事件管理。

摘要由CSDN通过智能技术生成

eventBus.js

import Vue from 'vue';

export const EventBus = new Vue();

components/Parent.vue

<template>
    <div>
        我是父组件
        <Son></Son>
    </div>
</template>

<script>
/*
vm.$on( event, callback )
参数：
{string | Array<string>} event (数组只在 2.2.0+ 中支持)
{Function} callback
用法：
监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。


vm.$once( event, callback )
参数：
{string} event
{Function} callback
用法：
监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。


vm.$off( [event, callback] )
参数：
{string | Array<string>} event (只在 2.2.2+ 支持数组)
{Function} [callback]
用法：
移除自定义事件监听器。
如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。


vm.$emit( eventName, […args] )
参数：
{string} ev