const emit = defineEmits(); const close = ()=>{ emit('update:show',false); }

时间: 2024-04-01 10:35:45 浏览: 81

通过vue手动封装on、emit、off的代码详解

在Vue.js框架中，组件之间的通信是其核心功能之一。Vue实例内置了$on、$emit和$off三个方法，分别用于监听自定义事件、触发自定义事件和移除监听器。但是，当开发者想要进行复杂的非父子组件通信时，直接使用$on、$emit、$off可能不够方便，因此需要手动封装这些方法以简化通信过程。本文将详细介绍如何手动封装on、emit、off事件，以及它们在Vue中的具体作用。 ### 一、概念理解 #### 1. Vue实例内置方法$on、$emit、$off - **$on**: 用于监听自定义事件。可以为Vue实例或组件添加一个或多个监听器。当对应的事件被触发时，所有绑定的监听器都会被自动调用。 - **$emit**: 用于触发一个自定义事件。在Vue实例上触发一个事件时，所有绑定到该事件的监听器都将被调用。 - **$off**: 用于移除自定义事件监听器。如果不提供参数，移除实例上的所有事件监听器；如果只提供事件名称，则移除该事件名的所有监听器；如果同时提供事件名和回调函数，则只移除该回调函数的监听器。 #### 2. 非父子组件之间的通信在Vue中，非父子组件通信有时需要一种机制来实现跨组件的数据共享。手动封装on、emit、off可以帮助实现这一目标。其核心思想是创建一个全局的事件监听器和触发器，允许任何组件向这个公共实例发送消息或监听消息。 ### 二、手动封装on、emit、off #### 1. 封装$on 封装$on的目的是创建一个全局的事件注册中心。当事件被触发时，需要知道所有绑定的监听函数，并依次调用它们。 ```javascript const EventList = {}; const on = function(eventName, callback) { if (!EventList[eventName]) { EventList[eventName] = []; } EventList[eventName].push(callback); }; ``` #### 2. 封装$emit 封装$emit需要遍历事件名对应的所有监听函数，并将参数传递给这些函数。如果事件名不存在，则什么也不做。 ```javascript const emit = function(eventName, params) { if (!EventList[eventName]) return; EventList[eventName].forEach((cb) => { cb(params); }); }; ``` #### 3. 封装$off 封装$off需要根据事件名和回调函数的存在与否来决定移除监听器的策略。如果只提供事件名，那么移除该事件名下的所有回调函数；如果回调函数也提供，则只移除该回调函数。 ```javascript const off = function(eventName, callback) { if (!EventList[eventName]) return; if (callback) { let index = EventList[eventName].indexOf(callback); EventList[eventName].splice(index, 1); } else { EventList[eventName] = []; } }; ``` ### 三、代码导出与使用将封装好的$on、$emit、$off方法导出，以便在Vue应用的其他组件或文件中引入和使用。 ```javascript export default { $on: on, $emit: emit, $off: off }; ``` 在Vue的其他组件或文件中，我们可以通过导入上述封装好的方法来实现自定义事件的监听和触发： ```javascript import Observer from './Observer'; Vue.prototype.Observer = Observer; ``` ### 四、总结通过手动封装Vue的$on、$emit、$off方法，开发者可以更轻松地实现复杂的组件通信，尤其是在非父子组件之间的通信场景。封装后的事件机制更接近于传统的观察者模式，使得组件间的依赖关系更清晰，维护起来也更加方便。不过，需要注意的是，过度使用全局事件可能会导致应用状态的难以追踪，因此，在使用时仍需谨慎，避免造成应用逻辑混乱。总体而言，这种封装方式为Vue组件通信提供了极大的灵活性和便利性。

这是一段 Vue.js 3 中的代码，其中使用了 `defineEmits` 函数定义了一个名为 `emit` 的事件函数。还定义了一个 `close` 函数，该函数会在调用时触发 `update:show` 事件并传递一个 `false` 参数。这个事件可能被父组件所监听，从而可以控制组件的显示和隐藏。

阅读全文

const emit = defineEmits(); const close = ()=>{ emit('update:show',false); }

相关推荐

解决vue bus.$emit触发第一次$on监听不到问题

emit-response-size:将响应大小作为事件发送

const emit = defineEmits

const emit = defineEmits(['update:modelValue'])

const emit = defineEmits<ComEmits>()

const emit = defineEmits([])

const emit = defineEmits(['mit'])

const emit = defineEmits(['success'])

const emit = defineEmits<{ (e: 'addTodo', newTodo: todoItemT): void }>()

const emit = defineEmits<{(e: 'click-right'): void}>() 这段代码的意思

那么const emit = defineEmits(['get-message'])，emit的值是什么

const emit = defineEmits(['get-message']) const sendMsg =()=>{ emit('get-message','this is son message') } </script>，其中emit 是什么

父组件调用子组件时@my-event="handleMyEvent"，子组件用const emit = defineEmits(['my-event'])没有返回值

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

最新推荐

上市公司企业澄清公告数据（2001-2023年） .xlsx

深入浅出：自定义 Grunt 任务的实践指南

管理建模和仿真的文件

数据可视化在缺失数据识别中的作用

ABB机器人在自动化生产线中是如何进行路径规划和任务执行的？请结合实际应用案例分析。

网络物理突变工具的多点路径规划实现与分析

"互动学习：行动中的多样性与论文攻读经历"

自动化缺失值处理脚本编写

SQLite在非易失性内存环境下如何进行事务处理和缓冲区管理的优化？

multifeed: 实现多作者间的超核心共享与同步技术