vue.js v-for里套slot,如何访问v-for当前值?

我写个组件,想实现这样的效果:

<info-list @on_data="fetch_data">
   <info-item title_field="xxx" link="/xxx/{{ item.id }}"/>
</info-list>

然后List的模板大概这样:

<script type="x/template" id="info-list">
  ...
  <div v-for="item in items">
    <slot></slot>
  </div>
  ...
</script>

Item的模板大概这样:

<script type="x/template" id="info-item">
  .....
  <a href="{{ link }}">{{ item[title_field] }}</a>
 ......
</script>

主要是问题是,slot里的组件,如何访问外层的状态。我看到stackoverflow也有人问类似的问题:
http://stackoverflow.com/questions/37248411/how-to-access-item-in-slot-inside-v-for-vue-js
还有:
http://forum.vuejs.org/topic/366/slot-as-an-item-row-template/6

阅读 11.1k
3 个回答

目前已经可以使用作用域插槽来解决这个问题
详见文档

只能這樣:

<info-list @on_data="fetch_data">
   <info-item v-for="item in items"/>
</info-list>

slot 是在父組件被編譯的,所以其作用域(scope)是在父組件,沒辦法在子組件傳值給 slot,可能要考慮改變下結構。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题