vue 组件 ref绑定后成了数组

persuit666 2019-01-04 02:04:30

v-for 循环一个列表，如

<div
v-for="(item,index) in list">

<CC :ref="'xxx'+index"></CC>
</div>
其中CC为自定义组件，为毛获取this.$refs.xxx0是个数组，而不是CC 这个vue组件？？？！还要再[0]获取一下才行，如下

this.$refs.xxx0[0]，我去，什么情况？！！！纳尼？

直接写死 ref="xxx" 这样this.$refs.xxx直接就是vue组件，vue有bug???绑定ref这个属性还不行？

...全文

902 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

yanzhi_2016 2019-01-04

打赏
举报

回复

并不是vue的bug，官方文档有说：当 v-for 用于元素或组件的时候，ref注册的引用信息将是包含 DOM 节点或组件实例的数组。也就是说通过v-for创建的每个元素不必具有不同的ref属性。

绑定数据，循环数组 Vue绑定属性，绑定html,绑定class,绑定style Vue及双向数据绑定，v-model，v-on:click，以及ref获取dom节点 Vue点击事件，方法，获取数据，改变数据，事件对象及自定义属性 demo练习，实现todolist效果1 demo练习，实现todolist效果2 demo练习，todolist使用localStorage实现数据的永久存储 Vue中创建组件以及使用组件

在 Vue 2 中，在v-for中使用的refattribute 会用 ref 数组填充相应的$refsproperty。在 Vue 3 中，此类用法将不再自动创建$ref数组。要从单个绑定获取多个 ref，要将ref绑定到一个更灵活的函数上 (这是一个新特性)。今天遇到了一个需求Cascader级联选择器，选中后下拉框自动关闭，给组件挂一个ref，@change里面用togglePopperVisible()就可以自动关闭，但是现在我的级联选择器是在v-for循环的列表里面，而且列...

本课程基于ES6来学习Vue的整个API，其中包含Vue基础API、Vue组件化开发、Vue组件通信、官方脚手架Vue-cli3的使用、Vue-devtools的使用、element-ui第三方组件的使用、手把手带你打造自己的表单组件、Vue核心插件...

vue中的ref,js数组常用方法,动态组件,插槽,自定义指令

v-for 中的 Ref 数组在 Vue 2 中，在 v-for 里使用的 ref attribute 会用 ref 数组填充相应的 $refs property。当存在嵌套的 v-for 时，这种行为会变得不明确且效率低下。在 Vue 3 中，这样的用法将不再在 $ref 中自动创建数组。要从单个绑定获取多个 ref，请将 ref 绑定到一个更灵活的函数上 (这是一个新特性)：一 : 在vue 2中的获取方式 <p v-for="(item,index) in 5" :key="index"

87,904

社区成员

224,614

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章