当前位置: 首页 > Web前端 > vue.js

vue复用同一个组件导致的问题

时间:2023-04-01 10:43:19 vue.js

情况是这样的,我在一个vue中引用了A组件,并使用了两次,代码如下:从'@/components/A.vue'组件导入A:{A}子组件A由两个select组成,selector列表数据需要异步axios请求。父组件获取到formData后,会将ToRefresh值改为true。A组件监视这个值——它会触发一个异步的axios请求来获取A组件。目前的问题是:第一个A组件不能正常显示选中的文字,第二个A组件可以。如果删除第二个A组件,那么唯一的A组件就可以正常显示了。如图:错误尝试:一开始是百度下载的,重新引入了第二个组件,名称不同,像这样-失败从'@/components/A.vue'导入A从'@/components/A导入B.vue'components:{A,B}第二次尝试使用ref指定子组件-失败:importAfrom'@/components/A.vue'components:{A}//this.ToRefresh=trueThis.$不使用相同的值子组件watch父组件refs.A1.getList()this.$refs.A2.getList()在第二次尝试的基础上第三次添加setTimeout,使第二个组件响应慢了300毫秒——成功!!从'@/components导入A/A.vue'components:{A}//this.ToRefresh=trueThis.$refs.A1.getList()setTimeout(()=>{this.$refs.A2.getList()},300)正确显示:还有其他好的解决办法吗?