1. 前言

1. 問(wèn)題困擾了幾天,今天突然解決了哈哈
2. Vue 父組件循環(huán)使用refs調(diào)用子組件方法出現(xiàn)undefined的問(wèn)題

2. 簡(jiǎn)要描述下場(chǎng)景

• 模板

  <div v-for="(componentName, registrationNumber) in cxDialog" :key="registrationNumber">
      <component :is="componentName" :ref="registrationNumber"></component>
    </div>

1. 父組件當(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)
}

1. 父組件點(diǎn)擊事件 可以獲取到組件,也有屬性但是訪問(wèn)的時(shí)候報(bào)錯(cuò) undefined

• 錯(cuò)誤

錯(cuò)誤

定時(shí)器 ,nextTick 等等嘗試了也不好使,

3. 解決方式-1

1. 每個(gè)組件單獨(dú)寫,不使用循環(huán)指令

<BDC313 ref="BDC313" /> 
<BDC314 ref="BDC314" /> 

1. 子組件少了還行,但是多了肯定不使用

4. 解決方式-2

• 模板

  <div v-for="(componentName, registrationNumber) in cxDialog" :key="registrationNumber">
      <component :is="componentName" ref="cxDialogRef"></component>
    </div>

1. ref不要?jiǎng)討B(tài)綁定 ,原因如下

2. 關(guān)于 ref 注冊(cè)時(shí)間的重要說(shuō)明：因?yàn)?ref 本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時(shí)候你不能訪問(wèn)它們 - 它們還不存在！$refs 也不是響應(yīng)式的，因此你不應(yīng)該試圖用它在模板中做數(shù)據(jù)綁定

• 邏輯

    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ù)組

1. 不要直接訪問(wèn)name屬性
2. 我這里其實(shí)還有過(guò)濾展示,還有其他組件的封裝,無(wú)法直接使用 ,循環(huán)時(shí)候的索引來(lái)從數(shù)組里面比對(duì),取值,這個(gè)看自己的需求來(lái)就行

5. 后記

1. 多看官網(wǎng),多試
2. 沒(méi)有牛人的本事,就自己多嘗試,咱就普通人,菜鳥.普通人有普通人的解決方式

參考資料

vue2ref

初心

我所有的文章都只是基于入門，初步的了解；是自己的知識(shí)體系梳理,如有錯(cuò)誤,道友們一起溝通交流;

如果能幫助到有緣人,非常的榮幸,一切為了部落的崛起;

共勉