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