[Vue] 组件内遍历的插槽要怎么引用？

[1010011010]

一个简单的遍历

<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 元素，之前的都被覆盖了

---

要如何引用所有遍历的项目？

[JSFiddle 示例]

[ipwx]

我觉得是楼主的顶层设计出了问题，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

[1010011010]

@ipwx #1
那个 item 是要用做组件的，所以要引用

[noe132]

正确的方式应该是在外面循环
https://jsfiddle.net/57zns0yL/22/

因为你并不知道子组件内部是一个怎样的逻辑。
如果需要获取所有 items_2，应该在子组件上暴露一个接口调用
https://jsfiddle.net/57zns0yL/30/

[1010011010]

@noe132 #3
那列表组件不是残废了吗
列表组件负责生成和更新列表，vm 只需要定义里面的项目是什么样的

2. 组件里引用不了，slot 不能引用

[1010011010]

2. slot 插的是一个组件，要引用到那个组件

[1010011010]

鬼鬼，瞬间沉底

[noe132]

不应该引用子组件内部的元素。
组件就是做隔离的，你这样打破了隔离。

需要通信，父组件通过 props 传值，子组件通过事件冒泡，或者暴露接口方法。

你要想象组件对于父级就是一个黑盒。

你要子组件渲染列表，那么你就传一个数组进去让他渲染。

不知道你要引用到 slot 里的 span 做什么用途？

[noe132]

建议参考以下文章
https://github.com/hehongwei44/my-blog/issues/202
https://addyosmani.com/first/