使用场景
- 存在一个公共页面 FormPage,封装多种表单组件,多种渠道都会跳转到 FormPage,根据路由传参不同,展示不同的表单组件。
- 表单内容提交后,跳转到结果页 FormResult,结果页点击返回重填,返回表单页 FormPage。
- 在 FormPage 页面需要判断是从渠道页进来的(新增操作),还是从 FormResult 返回回来的(编辑操作),这就需要在 FormResult 返回到 FormPage 的时候,有一个特殊的标识。
起初的思想
- 获取到 FormPage 的路由参数 queryAll,在表单填完后,跳转到 FormResult 的时候,将queryAll 携带过去。
- 在 FormResult 跳转回 FormPage 的时候,再携带着 queryAll 跳转回来。并且多携带一个参数 source,作为标识。
- 弊端:多种渠道携带路由参数不同,两个页面互相跳转时,需要判断传递的参数又杂又乱。
利用兄弟组件传值
- 创建一个实例,用来实现兄弟组件之前的传值
// busEvent.js
import Vue from 'vue'
/**
* 非父子组件传值
*/
var BusEvent = new Vue({});
export default BusEvent;
- 结果页返回之前,触发兄弟事件
<template>
<div class="formResult">
<el-button type="primary" @click="goBack">返回重填</el-button>
</div>
</template>
<script>
import BusEvent from "../util/busEvent";
export default {
data() {
return {
pageId: null,
};
},
mounted() {
this.getResult();
},
methods: {
getResult() {
// 模拟接口,获取到了表单提交成功后的唯一标识id
// 返回重填的时候,需要带回去,提交时,就可以对旧数据进行覆盖
this.pageId = "12138";
console.log(
"%c进入了结果页,获取到了表单提交后的标识:" + this.pageId,
"color: green;font-size: 20px;font-weight: bold;"
);
},
goBack() {
console.log(
"%c准备返回表单页",
"color: pink;font-size: 20px;font-weight: bold;"
);
// 返回上一页之前,先触发兄弟组件的事件
BusEvent.$emit("paperId", this.pageId);
this.$router.go(-1);
},
},
};
</script>
- 表单页引入 bus ,用于监听事件
<template>
<div class="formPage">
<el-form ref="form" :model="form" label-width="80px">
</el-form>
</div>
</template>
<script>
import BusEvent from "../util/busEvent";
export default {
data() {
return {
form: {},
};
},
mounted() {
this.getQuery();
// 监听兄弟事件
BusEvent.$on("paperId", (data) => {
this.initDetail(data);
});
},
methods: {
getQuery() {
console.log("路由携带的参数", this.$route.query);
// 根据携带过来的参数,判断 form 表单中,需要展示哪些表单项
},
onSubmit() {
this.$router.push({
path: "/formResult",
query: {},
});
},
// 渲染之前填写过的内容
initDetail(id) {
console.log("%c获取到了结果页传递过来的值:" + id, "color: red;font-size: 20px;font-weight: bold;");
// 使用 id 渲染填写过的数据
},
},
};
</script>
展示效果
- 第一次进入 FormPage 页,获取到了路由携带的参数,此时并没有监听到兄弟组件的方法 paperId ,即为新增操作。
- 填写表单内容完成后,点击立即创建按钮,跳转到 FormResult 页面,模拟接口效果,获取到了表单提交的唯一标识。
- 点击返回重填按钮,触发 paperId 方法。
- 跳转到 FormPage 页面,获取到了路由参数,并且监听到了 paperId 方法,且获取到了上次提交的唯一标识。即此次表单内容的填写为更新操作。
用法总结
// 第一步-----创建一个公共实例
import Vue from 'vue'
var BusEvent = new Vue({});
export default BusEvent;
// 第二步
// 在需要触发事件的地方,引入实例,触发事件,并且传值
import BusEvent from "../util/busEvent";
BusEvent.$emit("paperId", this.pageId);
// 第三步
// 在需要监听事件的地方,引入实例,监听事件
import BusEvent from "../util/busEvent";
BusEvent.$on("paperId", (data) => {
// 执行操作
});