VUE使用Emit可以取到返回值
写了个一个及其复杂的前端功能,需要把数据放到一个主页面来去进行共享,别的子页面到主页面去拿数据,进行筛选查询等等操作,本来想着个数据存储放到后端,但是最后的一步必须是原子性,就搞得很难受这么写的太麻烦了,子页面有十多个,而且都有联系,不管是代码维护还是其他因素考虑,代码写的太多了思考了一番,是否能够让Emit有返回值如图:之后经过研究发现,是可以的,红色的框返回的是本身的页面。而蓝色框是进行调用这
·
写了个一个及其复杂的前端功能,需要把数据放到一个主页面来去进行共享,别的子页面到主页面去拿数据,进行筛选查询等等操作,本来想着个数据存储放到后端,但是最后的一步必须是原子性,就搞得很难受
这么写的太麻烦了,子页面有十多个,而且都有联系,不管是代码维护还是其他因素考虑,代码写的太多了
思考了一番,是否能够让Emit有返回值如图:
之后经过研究发现,是可以的,红色的框返回的是本身的页面。而蓝色框是进行调用这个方法,运行之后发现这个方法是有返回值的
刚开始想重写这个方法,不过发现如果重写这个方法,所有页面都会进行改变,肯定不现实,所以就思考了一个最笨的办法,重新写这个方法,因为考虑到我只需要调用一个父级函数,没有考虑到多个父级函数的场景
展示效果:
子模块
父模块
debugger:
子模块调用前:
父模块调用中:
子模块调用结束:
最后附上修改的代码:
Vue.prototype.$resultEmit = function (event) {
var vm = this;
if (process.env.NODE_ENV !== 'production') {
var lowerCaseEvent = event.toLowerCase();
if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
tip(
"Event \"" + lowerCaseEvent + "\" is emitted in component " +
(formatComponentName(vm)) + " but the handler is registered for \"" + event + "\". " +
"Note that HTML attributes are case-insensitive and you cannot use " +
"v-on to listen to camelCase events when using in-DOM templates. " +
"You should probably use \"" + (hyphenate(event)) + "\" instead of \"" + event + "\"."
);
}
}
var cbs = vm._events[event];
var reslut = undefined;
if (cbs) {
cbs = cbs.length > 1 ? toArray(cbs) : cbs;
var args = toArray(arguments, 1);
var info = "event handler for \"" + event + "\"";
for (var i = 0, l = cbs.length; i < l; i++) {
reslut = invokeWithErrorHandling(cbs[i], vm, args, vm, info);
}
}
return reslut
};
更多推荐
已为社区贡献1条内容
所有评论(0)