如何在vue单页中重复引入同一子组件

 更新时间:2024年03月24日 16:47:40   作者:console.log( )  
这篇文章主要介绍了如何在vue单页中重复引入同一子组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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);
  }
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。

相关文章

  • vue移动端项目缓存问题实践记录

    vue移动端项目缓存问题实践记录

    最近在做一个vue移动端项目,被缓存问题搞得头都大了,积累了一些经验,特此记录总结下,分享到程序员之家平台,对vue移动端项目缓存问题实践记录感兴趣的朋友跟随小编一起看看吧
    2018-10-10
  • Vue中的变量赋值问题

    Vue中的变量赋值问题

    这篇文章主要介绍了Vue中的变量赋值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue router路由嵌套不显示问题的解决方法

    vue router路由嵌套不显示问题的解决方法

    这篇文章主要为大家详细介绍了vue router路由嵌套不显示的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下vue-router 路由嵌套不显示问题
    2017-06-06
  • vue中el-table实现无限向下滚动懒加载数据

    vue中el-table实现无限向下滚动懒加载数据

    一次性的加载全部的数据,并且将其渲染到页面上,就会导致页面卡顿,往往采用分页和无限滚动的方式来展示,本文主要介绍了vue中el-table实现无限向下滚动懒加载数据,感兴趣的可以了解一下
    2023-12-12
  • 使用vue实现猜谜卡片游戏

    使用vue实现猜谜卡片游戏

    这篇文章主要为大家详细介绍了如何使用vue实现简单的猜谜卡片游戏,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以参考一下
    2023-09-09
  • vue.js父组件使用外部对象的方法示例

    vue.js父组件使用外部对象的方法示例

    在我们日常开发中经常因为思维定式,我们会犯一些奇怪的错误,有时候看似简单的问题却给出了复杂的解决方案。下面这篇文章主要介绍了vue.js父组件使用外部对象的方法,这个看似简单却绕了一些弯路的问题,有必要和大家分享下,需要的朋友可以参考学习,下面来看看吧。
    2017-04-04
  • Vue Treeselect树形下拉框的使用小结

    Vue Treeselect树形下拉框的使用小结

    树形下拉框是一个带有下列树形结构的下拉框,本文主要介绍了Vue Treeselect树形下拉框的使用小结,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10
  • Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南详细教程

    Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南详细教程

    在Vue中使用JSON文件有多种方式,包括使用fetch方法加载JSON文件、使用axios库加载JSON文件,以及将JSON文件导入为模块,这篇文章主要介绍了Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南详细教程,需要的朋友可以参考下
    2024-01-01
  • Vue实现简单计算器案例

    Vue实现简单计算器案例

    这篇文章主要为大家详细介绍了Vue实现简单计算器案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • vue+axios全局添加请求头和参数操作

    vue+axios全局添加请求头和参数操作

    这篇文章主要介绍了vue+axios全局添加请求头和参数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论

?


http://www.vxiaotou.com