我要评论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);
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论