在vue单页中重复引入同一子组件
如果一个功能服用率比较高,我们一般写成一个公共组件,需要的时候就引入今天遇到一个问题,写了一个城市级联选择器的公共子组件,我在一个页面引入了三个该组件,发现只有一个能够使用,拿代码说事下面代码是我城市选择器的一部分,我将getProvince方法在created中执行,因此只要打开引入该组件的页面,方法中的请求就会发送,结果是三个组件中的其中两个console.log(res) 输出为un....
·
如果一个功能复用率比较高,我们一般写成一个公共组件,需要的时候就引入
今天遇到一个问题,写了一个城市级联选择器的公共子组件,我在一个页面引入了三个该组件,发现只有一个能够使用,拿代码说事
下面代码是我城市选择器的一部分,我将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方法
更多推荐
已为社区贡献10条内容
所有评论(0)