乐趣区

关于前端:Vue-重复使用同一组件造成的问题

状况是这样的,
我在一个 vue 中,援用了 A 组件,并且应用了两次,代码如下:

<tamplate>
<A :data="formData" :update="ToRefresh"></A>
<A :data="formData" :update="ToRefresh"></A>
</template>

import A from '@/components/A.vue'

components:{A}

子组件 A 是由两个 select 组成,选择器列表数据是须要异步 axios 申请的。
在父组件取得 formData 后,会把 ToRefresh 值变为 true。A 组件 watch 了这个值——会触发获取 A 组件的异步 axios 申请。

目前呈现的问题就是:第一个 A 组件无奈失常显示选中文字,然而第二个 A 组件就能够。如果把第二个 A 组件删除掉,惟一的 A 组件就能够失常显示。如图:

谬误的尝试:
一开始百度了下,第二个组件换了个名字从新引入,像这样——失败

<tamplate>
<A :data="formData" :update="ToRefresh"></A>
<B :data="formData" :update="ToRefresh"></B>
</template>

import A from '@/components/A.vue'
import B from '@/components/A.vue'

components:{A,B}

第二次尝试应用 ref 指定子组件——失败:

<tamplate>
<A ref="A1" :data="formData"></A>
<A ref="A2" :data="formData"></A>
</template>

import A from '@/components/A.vue'

components:{A}

// this.ToRefresh=true 不应用子组件 watch 父组件同一个值的形式
this.$refs.A1.getList()
this.$refs.A2.getList()

第三次在第二次尝试的根底上加了 setTimeout,让第二个组件响应慢 300 毫秒——胜利了!!

<tamplate>
<A ref="A1" :data="formData"></A>
<A ref="A2" :data="formData"></A>
</template>

import A from '@/components/A.vue'

components:{A}

// this.ToRefresh=true 不应用子组件 watch 父组件同一个值的形式
this.$refs.A1.getList()
setTimeout(()=>{this.$refs.A2.getList()
},300)

正确的显示:

不晓得有没有其它什么好的解决办法呢?

退出移动版