如何在v-for ( <slot> in v-for (vue.js) )中访问项

Question

如何将物品从发送到插槽？在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>

在组件的支持中声明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>