Vue封装的事件函数

Posted superclound

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue封装的事件函数相关的知识,希望对你有一定的参考价值。

/*
事件池
eventList =
handle:[fn1,fn2,fn3]
abc:[fn1,fn2,fn3]

||
eventList =

$on(eventName,callback)
判断当前事件名称是否存在,如果不存在则创建一个key值为事件名称 value为一个数组
将callback push到数组中

如果事件名称存在则直接添加到数组中去


$emit(eventName,[params])

判断当前事件名称是否存在,如果存在则遍历数组,得到所有的函数,并执行。然后将params当做实参传递到函数中去


$off(eventName,[callback])


判断当前事件名称是否存在,如果存在继续判断第二个参数是否存在,如果存在则找到相对于的下标 然后将函数在数组中移除
如果不存在则将整个数组清空
*/

const eventList =


const $on = (eventName,callback)=>
if(!eventList[eventName])
eventList[eventName] = [];

eventList[eventName].push(callback)

 

const $emit = (eventName,params)=>
if(eventList[eventName])
let arr = eventList[eventName];
arr.map((cb)=>//cb是遍历的数组中的每一个函数 map会返回一个item
cb(params);
)

const $off = (eventName,callback)=>
if(eventList[eventName])
if(callback)
let index = eventList[eventName].indexOf(callback);
eventList[eventName].splice(index,1);
else
eventList[eventName].length = 0;



function fn1(val)
console.log(111,val)

function fn2(val)
console.log(222,val)

function fn3(val)
console.log(333,val)

 

$on("handle",fn1)
$on("handle",fn2)
$on("handle",fn3)
$off("handle",fn1)
$emit("handle","abc")

以上是关于Vue封装的事件函数的主要内容,如果未能解决你的问题,请参考以下文章

vue封装element弹窗组件封装为什么抛不出去点击事件

vue solt内容分发/vue通用组件的封装

vue滑动条组件封装

vue基于vant封装组件

Vue 开发实战实战篇 # 40:自己封装一个支持自动校验的表单项

vue封装一个简单的div框选时间的组件