这是一个创建于 2436 天前的主题，其中的信息可能已经有所发展或是发生改变。
一个简单的遍历
<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