这是一个创建于 2764 天前的主题，其中的信息可能已经有所发展或是发生改变。
一个简单的遍历
<div v-for="item of 5"> <span ref="items_1">hi</span> </div> 引用 items_1 是一个数组：5 个 span
然后把遍历放在组件里
<div is="list"> <span ref="items_2">hi</span> </div> list 组件模板
<div v-for="item of 5"> <slot></slot> </div> 引用 items_2 不是数组，是最后一个 span 元素，之前的都被覆盖了
要如何引用所有遍历的项目？
 | 1 ipwx 2018-03-22 10:57:58 +08:00 我觉得是楼主的顶层设计出了问题，Vue 不该这么用才对啊。 $refs are designed primarily for programmatic access in Javascript - it is not recommended to rely on them in templates, because that would mean referring to state that does not belong to the instance itself. This would violate Vue ’ s data-driven view model. https://vuejs.org/v2/guide/migration.html?#Fragment-Instances-removed |
 | 2 1010011010 OP @ipwx #1 那个 item 是要用做组件的，所以要引用 |
 | 3 noe132 2018-03-22 11:07:11 +08:00 正确的方式应该是在外面循环 https://jsfiddle.net/57zns0yL/22/ 因为你并不知道子组件内部是一个怎样的逻辑。 如果需要获取所有 items_2，应该在子组件上暴露一个接口调用 https://jsfiddle.net/57zns0yL/30/ |
| 4 1010011010 OP |
| 5 1010011010 OP 2. slot 插的是一个组件，要引用到那个组件 |
| 6 1010011010 OP 鬼鬼，瞬间沉底  |
| 7 noe132 2018-03-22 11:58:08 +08:00 不应该引用子组件内部的元素。 组件就是做隔离的，你这样打破了隔离。 需要通信，父组件通过 props 传值，子组件通过事件冒泡，或者暴露接口方法。 你要想象组件对于父级就是一个黑盒。 你要子组件渲染列表，那么你就传一个数组进去让他渲染。 不知道你要引用到 slot 里的 span 做什么用途？ |
| 8 noe132 2018-03-22 15:15:43 +08:00 |
Select Language