$on:绑定事件
绑定事件,一个事件名称上面可能绑定多个函数 $on("事件名称",回调函数) 事件名称与函数之间的关系:key:[]
$emit:触发事件
触发事件时,需要触发当前事件身上所有的函数 $emit("事件名称",[需要传递的值])
$off:解绑事件
$off("事件名称") 解绑全部函数 $off("事件名称",需要解绑的函数) 如果没有传递第二个参数,则解绑所有的事件对应的函数 如果传递了第二个参数,则解绑指定的函数
业务逻辑
$on: 1.首先判断当前事件名称是否存在, 如果事件名称存在,则直接将当前函数push到当前数组中去 如果事件名称不存在,则创建一个数组,再将当前函数push到数组中 $emit: 1.判断当前事件名称是否存在, 如果不存在,则什么都不干,直接return 如果存在,则获取当前事件名称所对应的所有函数,遍历执行 2.如果第二个参数存在,调用函数时,将第二个参数传递进去 $off: 1.首先判断当前事件名称是否存在 如果不存在,直接return 如果存在,则判断第二个参数是否存在 如果存在,则将这个函数从数组中移除 如果不存在,则直接将数组清空
代码实现 新建observer.js,在main.js中引用,挂在到vue原型上
let EventList = {
//事件名称与事件函数的关系key:[]
//key:[]
}
const $on = (EventName,cb)=>{
//判断事件名称是否存在
if(!(EventList[EventName])){
//事件名称不存在,则创建数组
EventList[EventName] = [];
}
//将事件名称对应的函数push到数组中
EventList[EventName].push(cb);
}
const $emit = (EeventName,params)=>{
//判断事件名称是否存在,不存在,直接return
if(!EventList[EeventName])return;
//事件名称存在,获取当前事件名称对应的所有函数,遍历执行
let EventLists = EventList[EeventName];
//遍历事件名称所对应的函数
EventLists.map((cb)=>{
//判断是否传值,执行对应的函数
params?cb(params):cb();
})
}
const $off = (EventName,callback)=>{
//判断事件名称是否存在,若存在
if(EventList[EventName]){
let EventListsOff = EventList[EventName];
//判断第二个参数是否存在,如果存在
if(callback){
//将其从数组中移除
EventList[EventName] = EventListsOff.filter((cb)=>{
return cb != callback;
})
}else{
//第二个参数不存在,直接将数组清空
EventList[EventName].length = 0;
}
}
}
export default {
$on,
$emit,
$off
}
main.js文件
import Observer from '@/libs/observer'
Vue.prototype.observer = Observer;
使用时候,通过this.observe.$on或者this.observe.$emit进行
// 绑定事件
this.observer.$on("changePassShow",(e)=>{
if(e){
this.visible = true
this.falgVisible = false
}else{
this.visible = false
this.falgVisible = true
}
})
// 触发事件
this.observer.$emit('changePassShow',true)