$emit 与 $on的共用

最新推荐文章于 2022-06-22 09:25:59 发布

先不要想收获，扎实

最新推荐文章于 2022-06-22 09:25:59 发布

阅读量178

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41820930/article/details/108871932

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文探讨了如何在Vue应用中通过$on/$emit实现数据交互，以实例展示如何在水库系统中响应防汛物资更新事件。当从list页面接收到'fxwz'事件时，参数解析并更新表单数据，包括PRSC、ZT、地区等字段。

摘要由CSDN通过智能技术生成

$on

由$emit抛出
由$on接收

水库系统，防汛物资 sta

vm.$emit("fxwz", {
					rpsa: index,
					prsc: scale,
					lvl: row.lvl,
					row: row
				});

list页面

getParamsData() {
				let _this = this;
				_this.reset();
				vm.$on('fxwz', data => {
					if (data.rpsa) {
						_this.formItem.PRSC = data.prsc == 0 ? '' : data.prsc == 1 ? '' : data.prsc;
						_this.formItem.ZT = parseInt(data.rpsa) == 3 ? '0' : parseInt(data.rpsa) == 2 ? '1' : "";
						this.formItem.PRV = '湖南省';
						if (data.row.cty != undefined) {
							_this.formItem.CITY = data.row.cty;
						} else if (data.row._city != undefined) {
							_this.formItem.CITY = data.row._city;
						} else {
							_this.formItem.CITY = data.row.CITY == '湖南省' ? '' : data.row.CITY;
						}

						this.formItem.CNTY = data.row.CNTY ? data.row.CNTY : '';
						_this.loadData(1)
					}

				})

			},

监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。