1. 前言
- 問題困擾了幾天,今天突然解決了哈哈
- Vue 父組件循環(huán)使用refs調(diào)用子組件方法出現(xiàn)
undefined的問題
2. 簡(jiǎn)要描述下場(chǎng)景
- 模板
<div v-for="(componentName, registrationNumber) in cxDialog" :key="registrationNumber">
<component :is="componentName" :ref="registrationNumber"></component>
</div>
- 父組件當(dāng)中.v-for 循環(huán)動(dòng)態(tài)創(chuàng)建子組件
- 點(diǎn)擊事件
apiClickCB(btn) {
console.log('componentRef', this.$refs)
console.log('ref', this.$refs[btn.apiCode])
console.log('show', this.$refs[btn.apiCode].show)
}
- 父組件點(diǎn)擊事件 可以獲取到組件,也有屬性但是訪問的時(shí)候報(bào)錯(cuò)
undefined
- 錯(cuò)誤
錯(cuò)誤
定時(shí)器 ,nextTick 等等嘗試了也不好使,
3. 解決方式-1
- 每個(gè)組件單獨(dú)寫,不使用循環(huán)指令
<BDC313 ref="BDC313" />
<BDC314 ref="BDC314" />
- 子組件少了還行,但是多了肯定不使用
4. 解決方式-2
- 模板
<div v-for="(componentName, registrationNumber) in cxDialog" :key="registrationNumber">
<component :is="componentName" ref="cxDialogRef"></component>
</div>
- ref不要?jiǎng)討B(tài)綁定 ,原因如下
- 邏輯
apiClickCB(btn) {
console.log('this.$refs.cxDialogRef', this.$refs.cxDialogRef);
this.$refs.cxDialogRef.forEach((com) => {
if (com.$options.name == btn.apiCode) {
console.log('com.$options', com.$options.name);
console.log('name', com.name);
com.show(btn)
}
})
},
調(diào)試
當(dāng) ref 和 v-for 一起使用的時(shí)候衣洁，你得到的 ref 將會(huì)是一個(gè)包含了對(duì)應(yīng)數(shù)據(jù)源的這些子組件的數(shù)組
- 不要直接訪問
name屬性- 我這里其實(shí)還有過(guò)濾展示,還有其他組件的封裝,無(wú)法直接使用 ,循環(huán)時(shí)候的索引來(lái)從數(shù)組里面比對(duì),取值,這個(gè)看自己的需求來(lái)就行
5. 后記
- 多看官網(wǎng),多試
- 沒有牛人的本事,就自己多嘗試,咱就普通人,菜鳥.普通人有普通人的解決方式
