我写个组件,想实现这样的效果:
<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
目前已经可以使用作用域插槽来解决这个问题
详见文档