在vue官方文档中看到vue v2.1.0新增作用域插槽,文档中说明的使用方法和案例我都看明白了,但无法理解该案例的用意:
作用域插槽更具代表性的用例是列表组件,允许组件自定义应该如何渲染列表每一项:
<my-awesome-list :items="items">
<!-- 作用域插槽也可以在这里命名 -->
<template slot="item" scope="props">
<li class="my-fancy-item">{{ props.text }}</li>
</template>
</my-awesome-list>
列表组件的模板:
<ul>
<slot name="item"
v-for="item in items"
:text="item.text">
<!-- fallback content here -->
</slot>
</ul>
我对这个案例的理解是:子组件从数据源中获取数据,然后回传给父组件来做样式层面的渲染。这跟我的认知有冲突,难道不是应该父组件获取数据后,再交给子组件来渲染的吗?
敢问大家是怎么理解官方给出的这个案例的呢?另外,能否介绍一下在实际项目中对此特性的应用场景?
补充:我是明白slot的用意的,我只是不明白为什么既然在slot机制下,slot部分的控制权已经完全交给父组件了,还要提供子组件的属性供父组件来使用。
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…