vue 封装类似于$emit、$on公共方法
作者:互联网
在vue项目中我们经常用到组件传值的方法;
接下来我们就封装一个类似于$emit、$on的方法;
在src目录下创建一个observer的文件,里边写上要封装的方法;
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(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; } } }; export default { $on, $emit, $off };
然后写完封装方法后在main.js文件中引入;
在调用页面使用的方法
在接收页面的调用方法
这样就写了一个公共方法来实现组件间传值
标签:vue,封装,eventList,eventName,callback,const,emit 来源: https://www.cnblogs.com/BySee1423/p/12889200.html