Vue 父组件循环使用refs调用子组件方法出现undefined的问题

Posted 2021-01-28 rever

Vue 父组件循环使用refs调用子组件方法出现undefined的问题

1. 背景

最近前端项目遇到一个问题，我在父组件中使用了两个相同的子组件child，分别设置ref为add和update。其中A组件的功能是新增，也就是说在页面上A页面只有一个。而update组件是放在表格里的，表格中的每一行数据都有update组件。跟update组件并列还有一个删除按钮，每次删除完都会重新获取数据。

2.问题描述

界面第一次加载时我对表格的组件B进行操作的时候是没问题的，但是当我删除某一行的数据之后再点击B组件，出现了update组件变为undefined的问题。

    <el-table-column label="操作" min-width="100px">
                        <template slot-scope="scope">
                            <UpdateButton title="修改" @click.native="updateClick(scope.row)" size="mini"></UpdateButton>
                            <DeleteButton class="resource_pause_delete_button" @click.native="ruleDelete(scope.$index, scope.row)" />
                            <TimeSelectDialog ref="updateTime" title="修改暂停规则">
                                <update-button @click.native="updateData()" size="mini">
                                </update-button>
                            </TimeSelectDialog>
                        </template>
                    </el-table-column>

3.定位问题

因为add和update是相同的组件，所以我一开始认为是两个组件的冲突。但是当我把add组件完全去掉之后，还是出现了undefined的问题。所以排除了add组件是干扰这个原因。

继续猜想以为是组件渲染问题，于是我给update组件添加了nextTick和setTimeOut来让组件渲染完成。但是这依然不起作用。

紧接着我看了下vue中关于ref的文档。

当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

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

我的组件用了element-UI的el-table组件，这个组件的内部肯定是使用了v-for循环的。于是我就把问题定位在v-for引起的数据绑定问题。

我把update组件从el-table中拿出来，放在表格之外。此时表格行内的按钮只是调用update组件，并且每次调用的都是同一个组件。这次问题果然解决了。

4.总结

ref本身是作为渲染结果被创建的，这句话应该是这样理解的。如果在循环中使用了包含ref的组件，那么循环出来的就是ref组件渲染的结果。当数据改变需要重新循环的时候，因为ref并不是响应式的，这导致包含了ref组件的行就无法再被渲染出来，因此出现了undefined的问题。

反过来想，既然update组件是一个可重用的组件，那么我们每次都让组件渲染其实并不是一个好的实现。实际上我的页面中的update组件每次改变的只有数据。从这个角度思考，我的设计是不合理的。