1. 前言

1. 问题困扰了几天,今天突然解决了哈哈
2. Vue 父组件循环使用refs调用子组件方法出现undefined的问题

---

2. 简要描述下场景

• 模板

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

1. 父组件当中.v-for 循环动态创建子组件

• 点击事件

    apiClickCB(btn) {
      console.log('componentRef', this.$refs)
      console.log('ref', this.$refs[btn.apiCode])
      console.log('show', this.$refs[btn.apiCode].show)
}

1. 父组件点击事件 可以获取到组件,也有属性但是访问的时候报错 undefined

• 错误

错误

定时器 ,nextTick 等等尝试了也不好使,

---

3. 解决方式-1

1. 每个组件单独写,不使用循环指令

<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不要动态绑定 ,原因如下

2. 关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定

• 逻辑

    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)
        }
      })
    },

调试

当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组

1. 不要直接访问name属性
2. 我这里其实还有过滤展示,还有其他组件的封装,无法直接使用 ,循环时候的索引来从数组里面比对,取值,这个看自己的需求来就行

---

5. 后记

1. 多看官网,多试
2. 没有牛人的本事,就自己多尝试,咱就普通人,菜鸟.普通人有普通人的解决方式

---

参考资料

vue2ref

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉