快捷導(dǎo)航

如何在vue單頁(yè)中重復(fù)引入同一子組件

更新時(shí)間：2024年03月24日 16:47:40 作者：console.log( )

這篇文章主要介紹了如何在vue單頁(yè)中重復(fù)引入同一子組件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue單頁(yè)中重復(fù)引入同一子組件

如果一個(gè)功能復(fù)用率比較高，我們一般寫成一個(gè)公共組件，需要的時(shí)候就引入

今天遇到一個(gè)問(wèn)題，寫了一個(gè)城市級(jí)聯(lián)選擇器的公共子組件，我在一個(gè)頁(yè)面引入了三個(gè)該組件，發(fā)現(xiàn)只有一個(gè)能夠使用，拿代碼說(shuō)事

下面代碼是我城市選擇器的一部分，我將getProvince方法在created中執(zhí)行，因此只要打開引入該組件的頁(yè)面，方法中的請(qǐng)求就會(huì)發(fā)送，結(jié)果是三個(gè)組件中的其中兩個(gè)console.log(res) 輸出為underfined，為了測(cè)試是否是res的是輸出結(jié)果，我在后面輸出1，發(fā)現(xiàn)確實(shí)是輸出了三次1，underfined就是res的輸出結(jié)果，頁(yè)面中只有一個(gè)級(jí)聯(lián)選擇器點(diǎn)擊有數(shù)據(jù)

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

在頁(yè)面中引入組件

<queryData @ProvinceData="childByValue"></queryData>

子組件返回?cái)?shù)據(jù)

this.$emit('ProvinceData', this.newObject);

解決方法

不要在同一時(shí)間去調(diào)用，我選擇在點(diǎn)擊輸入框的時(shí)候再執(zhí)行請(qǐng)求，所以在任何一個(gè)子組件被使用時(shí)都會(huì)重新發(fā)送一次請(qǐng)求

在下拉框展開事件中，執(zhí)行g(shù)etProvince方法

vue多個(gè)相同組件重復(fù)請(qǐng)求的問(wèn)題

一個(gè)頁(yè)面中如果多次調(diào)用同一個(gè)組件的話，組件中請(qǐng)求多個(gè)接口，那么就會(huì)導(dǎo)致一上來(lái)就會(huì)一次性請(qǐng)求多個(gè)重復(fù)的接口。

解決方案

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;

/**
 * 睡眠一段時(shí)間
 * @param {Number} ms 延遲時(shí)間，單位毫秒
 * @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++) {
      // 如果有計(jì)數(shù)說(shuō)明自己不是第 1 個(gè)，就等。注意這里判斷的是加之前的 count
      // 循環(huán)里最好再加個(gè)超時(shí)判斷
      while (!cache) {
        await delay();
      }
    } else {
      // 是第 1 個(gè)就去請(qǐng)求
      // 如果這里有可能會(huì)拋異常，拋異常也不要漏了 count--
      const res1 = await listDept(); //部門列表
      const res2 = await roleSelect(); //角色列表
      const res3 = await formSelect(params); //表單數(shù)據(jù)

      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 的時(shí)候用
    return cache;
  } catch (error) {
    console.log("獲取數(shù)據(jù)出錯(cuò)", error);
  }
}