快捷導(dǎo)航

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

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

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

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

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

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

下面代碼是我城市選擇器的一部分，我將getProvince方法在created中執(zhí)行，因此只要打開引入該組件的頁面，方法中的請求就會發(fā)送，結(jié)果是三個組件中的其中兩個console.log(res) 輸出為underfined，為了測試是否是res的是輸出結(jié)果，我在后面輸出1，發(fā)現(xiàn)確實是輸出了三次1，underfined就是res的輸出結(jié)果，頁面中只有一個級聯(liá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);
					}
				})
			},

在頁面中引入組件

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

子組件返回數(shù)據(jù)

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

解決方法

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

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

vue多個相同組件重復(fù)請求的問題

一個頁面中如果多次調(diào)用同一個組件的話，組件中請求多個接口，那么就會導(dǎo)致一上來就會一次性請求多個重復(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;

/**
 * 睡眠一段時間
 * @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++) {
      // 如果有計數(shù)說明自己不是第 1 個，就等。注意這里判斷的是加之前的 count
      // 循環(huán)里最好再加個超時判斷
      while (!cache) {
        await delay();
      }
    } else {
      // 是第 1 個就去請求
      // 如果這里有可能會拋異常，拋異常也不要漏了 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 的時候用
    return cache;
  } catch (error) {
    console.log("獲取數(shù)據(jù)出錯", error);
  }
}