vue 父循环怎么拿子循环中的值_Vue 父组件循环使用refs调用子组件方法出现undefined的问题...

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

1. 背景

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

2.问题描述

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

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 父循环怎么拿子循环中的值_Vue 父组件循环使用refs调用子组件方法出现undefined的问题...相关推荐

vue 关于父组件同时多次调用子组件而产生的 this取值的bug问题
vue 关于父组件同时多次调用子组件而产生的 this取值的bug问题我们在开发vue项目的使用,会经常使用this这个关键字,this指向vue这个实例,我们可以使用this.来获取data里面 ...
vue 子级拿值_vue 父组件通过$refs获取子组件的值和方法详解
前言在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收子传父:在父组件中监听一个事件,在子组件中 ...
vue 子级拿值_Vue 父组件主动获取子组件的值，子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header" 2. 在父组件中通过this.$refs.header.属性,调用子组件的属性 ...
vue 事件调用传参_vue如何在父组件指定点击事件后向子组件传递参数并调用子组件的事件？...
可以给父组件写一个ref属性,父组件可以通过ref拿到子组件中的数据和方法(即例子中子组件的say方法),这样在父组件中就可以触发子组件的事件了.而父组件向子组件传参可以通过prop属性(即例子中的f ...
vue获取div中的值_vue获取内存中的值并写入
发表评论发表评论第{{i+1}}楼匿名用户发表时间:{{item.id|dateFormat}} {{item.content}} 加载更多 export default{ data(){ ...
React 父组件（hooks）调用子组件（calss）方法
父组件(hooks) let richTextRef = {};<RichText getRichText={getRichText} content={content} onRef={ref ...
JavaFX下的WebView中js调用java注入方法提示undefined？
关键词: java注入无效 js无法调用java方法 java上下文注入未生效背景: 官方提供的demo是直接new JavaApp(),但实际使用不行,需要刷新页面后才生效解决方案: 主要修改的 ...
vue 父组件调用子组件的方法
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 我们都知道通过$ref可以获取到某个DOM,但是它也可以用来获取子组件的实例,调用子组件的方法例: ...
将多选框中的值，用String接收，并用‘，’隔开，到后台去循环这个数据
//首先通过CheckBox的名字去找到所有的CheckBox, var obj = document.getElementsByName("checkbox1"); var ch ...

vue 父循环怎么拿子循环中的值_Vue 父组件循环使用refs调用子组件方法出现undefined的问题...

vue 父循环怎么拿子循环中的值_Vue 父组件循环使用refs调用子组件方法出现undefined的问题...相关推荐

最新文章

热门文章