1. 前言
- 问题困扰了几天,今天突然解决了哈哈
- Vue 父组件循环使用refs调用子组件方法出现
undefined的问题
2. 简要描述下场景
- 模板
<div v-for="(componentName, registrationNumber) in cxDialog" :key="registrationNumber">
<component :is="componentName" :ref="registrationNumber"></component>
</div>
- 父组件当中.v-for 循环动态创建子组件
- 点击事件
apiClickCB(btn) {
console.log('componentRef', this.$refs)
console.log('ref', this.$refs[btn.apiCode])
console.log('show', this.$refs[btn.apiCode].show)
}
- 父组件点击事件 可以获取到组件,也有属性但是访问的时候报错
undefined
- 错误
错误
定时器 ,nextTick 等等尝试了也不好使,
3. 解决方式-1
- 每个组件单独写,不使用循环指令
<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不要动态绑定 ,原因如下
- 逻辑
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)
}
})
},
调试
- 不要直接访问
name属性- 我这里其实还有过滤展示,还有其他组件的封装,无法直接使用 ,循环时候的索引来从数组里面比对,取值,这个看自己的需求来就行
5. 后记
- 多看官网,多试
- 没有牛人的本事,就自己多尝试,咱就普通人,菜鸟.普通人有普通人的解决方式
