创建文件
页面引入
watch监听tab切换后进行bus.$emit传参,在另一个侧边栏组件是使用了Bus.$on获取数据的,但没成功刷新视图
watch: {
$route: {
handler: function(route) {
if (route.path.includes("/StatisticThing")) {
this.isActive = "2";
} else if (route.path.includes("/officePlatform/")) {
Bus.$emit("ulLi2", this.officePlatformList);
this.isActive = "1";
} else if (route.path.includes("/examineGrade")) {
this.isActive = "4";
} else if (route.path.includes("/officeRiskInvestigation")) {
Bus.$emit("ulLi2", this.riskInvestigationList);
this.isActive = "7";
}
},
immediate: true
}
},
上方代码的问题在哪呢,我们需要延迟传参事件,使用setTimeout就可以解决
watch: {
$route: {
handler: function(route) {
if (route.path.includes("/StatisticThing")) {
this.isActive = "2";
} else if (route.path.includes("/officePlatform/")) {
setTimeout(() => {
Bus.$emit("ulLi2", this.officePlatformList);
}, 100);
this.isActive = "1";
} else if (route.path.includes("/examineGrade")) {
this.isActive = "4";
} else if (route.path.includes("/officeRiskInvestigation")) {
setTimeout(() => {
Bus.$emit("ulLi2", this.riskInvestigationList);
}, 100);
this.isActive = "7";
}
},
immediate: true
}
},
一波未平一波又起,突然发现tab切换后选中状态丢了,接参数的时候来一个延迟就又行了,控制台打印发现不这样整mounted里的事件比created都要先执行
created() {
this.getList();
},
mounted() {
setTimeout(() => {
this.checked();
}, 100);
},
methods: {
getList() {
console.log("已执行 :>> ", "已执行");
Bus.$on("ulLi2", ulLi2 => {
this.ulLi = ulLi2;
console.log("this.ulLi,ulLi2 :>> ", this.ulLi, ulLi2);
});
},
checked() {
var path = window.location.href;
var i = path.indexOf("#"),
i2 = path.indexOf("?"),
pathTest = "";
if (i > -1 && i2 > -1) {
pathTest = path.slice(i + 1, i2);
} else if (i > -1 && i2 == -1) {
pathTest = path.slice(i + 1, path.length);
}
var checked = this.steamroller(this.ulLi);
console.log("checked :>> ", checked);
checked.forEach(ele => {
if (ele.url) {
var path = ele.url.split("?")[0];
if (path == pathTest) {
this.isActive = ele.id;
}
}
// if(ele.url == pathTest){
// this.isActive= ele.id
// }
});
},