如何在vue单页中重复引入同一子组件
作者：console.log( )
这篇文章主要介绍了如何在vue单页中重复引入同一子组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue单页中重复引入同一子组件
如果一个功能复用率比较高，我们一般写成一个公共组件，需要的时候就引入
今天遇到一个问题，写了一个城市级联选择器的公共子组件，我在一个页面引入了三个该组件，发现只有一个能够使用，拿代码说事
下面代码是我城市选择器的一部分，我将getProvince方法在created中执行，因此只要打开引入该组件的页面，方法中的请求就会发送，结果是三个组件中的其中两个console.log(res) 输出为underfined，为了测试是否是res的是输出结果，我在后面输出1，发现确实是输出了三次1，underfined就是res的输出结果，页面中只有一个级联选择器点击有数据
getProvince(data) {
cityFormApi.getDown(data).then(res => {
console.log(res)
console.log('1')
let that = this;
let province = res.data;
for (let i = 0; i < province.length; i++) {
let wzpz = province[i];
wzpz.value = wzpz.id;
wzpz.label = wzpz.name;
wzpz.loading = false;
wzpz.children = [];
that.newSbType.push(wzpz);
}
})
},在页面中引入组件
<queryData @ProvinceData="childByValue"></queryData>
子组件返回数据
this.$emit('ProvinceData', this.newObject);解决方法
不要在同一时间去调用，我选择在点击输入框的时候再执行请求，所以在任何一个子组件被使用时都会重新发送一次请求
在下拉框展开事件中，执行getProvince方法
vue多个相同组件重复请求的问题
一个页面中如果多次调用同一个组件的话，组件中请求多个接口，那么就会导致一上来就会一次性请求多个重复的接口。
解决方案
import { listDept } from "@/api/system/dept";
import { roleSelect } from "@/api/system/role";
import { formList as formSelect } from "@/api/statisticalConfig/formManage";
import { validatenull } from "@/utils/ruoyi";
let cache = {};
let count = 0;
/**
* 睡眠一段时间
* @param {Number} ms 延迟时间，单位毫秒
* @returns {Promise<void>}
*/
async function delay(ms = 200) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
export async function getAllData(params) {
try {
let id = localStorage.getItem("oldBusinessTypeId");
if (!validatenull(cache) && id == params.businessTypeId) {
return cache;
}
if (count++) {
// 如果有计数说明自己不是第 1 个，就等。注意这里判断的是加之前的 count
// 循环里最好再加个超时判断
while (!cache) {
await delay();
}
} else {
// 是第 1 个就去请求
// 如果这里有可能会抛异常，抛异常也不要漏了 count--
const res1 = await listDept(); //部门列表
const res2 = await roleSelect(); //角色列表
const res3 = await formSelect(params); //表单数据
cache = {
deptList: res1.data,
roleList: res2.data,
formList: res3.data,
};
if (!validatenull(cache.formList)) {
let oldBusinessTypeId = cache.formList[0].businessTypeId;
localStorage.setItem("oldBusinessTypeId", oldBusinessTypeId);
}
}
count--; // 记得减回去，方便以后如果要刷新 cache 的时候用
return cache;
} catch (error) {
console.log("获取数据出错", error);
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。