如何访问中的项目 <slot> 内部v-for（vue.js）

Question

如何将物品从v-for发送到插槽？ 在vue.js中 。

ListComponent：

<ul>
  <li v-for="item in list">
    <slot></slot>
  </li>
</ul>

页面预览：

<list-component :list="list">
  <span v-text="item.value"></span>    
</list-component>

代码<span v-text="item.value"></span>无法访问item （从组件范围）。 是否可以将item从组件发送到标签中的代码？

PS我知道，作为一种解决方法，我可以将$index从组件发送到父视图，但这有点棘手

---

UPD：我当前解决方法的示例（可能有人会觉得有用）：

在视图数据中声明index ：

data () {
  return {
    index: 0,
    list: [ ... ]
}

将index参数添加到视图模板：

<list-component :list="list" :index="index">
  <span v-text="list[index].value"></span>    
</list-component>

在组件的props中声明index ：

props: {
  index: {
    type: Number
  }
}

向v-for的元素添加索引：

<ul>
  <li v-for="item in list" index="$index">
    <slot></slot>
  </li>
</ul>

Answer 1

绑定表达式是在定义它们的上下文中编译的，因此：

v-text="item.value"

无法编译，因为在“页面”视图中未定义“项目”。

也许您可以尝试更改代码结构，如下所示：

ListComponent：

//content in component
<span>i am text in component,item value is:{{item.value}}</span>
<slot></slot>

页面预览：

<ul>
  <li v-for="item in list">
      <list-component :item="item"></list-component>
  </li>
</ul>