在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方法