标签：Vue undefined 渲染 update add 组件 ref

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的文档。

$refs 不是响应式的，数据更新后，视图不会随着更新 亲试过

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

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

4.总结

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

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

标签：Vue,undefined,渲染,update,add,组件,ref
来源： https://www.cnblogs.com/mmzuo-798/p/16207462.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。