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组件每次改变的只有数据。从这个角度思考,我的设计是不合理的。

Vue 父组件循环使用refs调用子组件方法出现undefined的问题的更多相关文章

  1. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  2. Angular 中的 dom 操作(ViewChild)以及父子组件中通过 ViewChild 调用子组件的方法

    <app-header #header></app-header> <div #myBox> 我是一个dom节点 </div> <button ( ...

  3. Vue 父页面 值传递 不到 子组件....

    ...各种百度无果..最后发现 这两个值 都是绑定的一个 ajax....... 坑爹啊..所以注意了....以后的写法.... 比如 data:{ data1: data2: } 假如 data1 ...

  4. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  5. Vue 父组件调用子组件函数的方法

    parent.vue(父组件的内容): <template> <div @click="divClick"> <info-wnd ref=" ...

  6. vue 父组件调用子组件方法

    情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块. 父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部. 父组件页面的上方同时有 ...

  7. Vue 父组件调用子组件的方法

    qwq  前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...

  8. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  9. Vue父组件调用子组件的方法

    vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用,例如: 父组件: <template> <div @click ...

随机推荐

  1. Spark Streaming 在数据平台日志解析功能的应用

    https://mp.weixin.qq.com/s/bGXhC9hvDj4lzK7wYYHGDg 目前,我们使用Filebeat监控日志产生的目录,收集产生的日志,打到logstash集群,接入ka ...

  2. bisecting k-means

    总结 1.二分法 2.总体中的最值 bisecting k-means :在初始时将所有数据当成一个聚簇,然后递归地将最不紧凑的聚簇用2-means拆分为2个聚簇,直至满意

  3. php Only variables can be passed by reference

    最近做项目,发现了一个报错  Only variables can be passed by reference,  意思是"只有变量能通过'引用'" 就是在代码中 使用了一个方法 ...

  4. 【Git 使用笔记】第三部分:多分支开发

    ###举例仓库 仓库地址A:git@gitlab.54php.cn:guowei/demos.git 仓库地址B:git@gitlab.54php.cn:infra/demos.git 开发人员仓库C ...

  5. CentOS VmwareTools安装

    1. 虚拟机菜单栏--虚拟机--安装VMware tools 2. CentOS系统中弹出的VMware tools窗口中--右击VMwaretools.tar.gz--Extract到桌面 3.打开 ...

  6. C#基础笔记(第十天)

    C#基础笔记(第十天) 1.字段.属性.方法.构造函数字段:存储数据属性:保护字段,对字段的取值和设值进行限定方法:描述对象的行为构造函数:初始化对象(给对象的每个属性依次的赋值)类中成员,如果不加访 ...

  7. hdu1864最大报销额(01背包)

    http://acm.sdut.edu.cn:8080/vjudge/contest/view.action?cid=187#problem/G 该题要注意的就是每张单子A种类的总和不能大与600,同 ...

  8. PAT 1020 Tree Traversals[二叉树遍历]

    1020 Tree Traversals (25)(25 分) Suppose that all the keys in a binary tree are distinct positive int ...

  9. 复习一下property

    在面向对象程序里,一个对象不要直接访问另一个对象内部的数据.所以我们使用accessor methods来进行对象内部的数据交互. accessor methods(getters and sette ...

  10. CloudFlare防护下的破绽:寻找真实IP的几条途径

    本文仅代表作者独立观点,本文提及的技术仅供安全研究和渗透测试用途 看Twitter发现CloudFlare总裁什么的最近很高调,北京.香港的跑着参加会议.发表演说什么的,CloudFlare似乎也没那 ...