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

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到标记中的代码的方法吗？

P.S。我知道，作为一种解决方法，我可以将$index从组件发送到父视图，但它有点hacky

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

在视图的数据中声明index：

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

将index param添加到视图的模板中：

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

在组件的道具中声明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"

无法编译，因为在页面视图中没有＆＃34;项目＆＃34;定义

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

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>