如何在 <slot> v-for (vue.js) 内部访问项目

Question

如何将项目从v-for发送到slot？在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从组件发送到父视图，但这有点麻烦

---

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>