在vue官方文檔中看到vue v2.1.0新增作用域插槽,文檔中說明的使用方法和案例我都看明白了,但無法理解該案例的用意:
作用域插槽更具代表性的用例是列表組件,允許組件自定義應(yīng)該如何渲染列表每一項:
<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>
我對這個案例的理解是:子組件從數(shù)據(jù)源中獲取數(shù)據(jù),然后回傳給父組件來做樣式層面的渲染。這跟我的認知有沖突,難道不是應(yīng)該父組件獲取數(shù)據(jù)后,再交給子組件來渲染的嗎?
敢問大家是怎么理解官方給出的這個案例的呢?另外,能否介紹一下在實際項目中對此特性的應(yīng)用場景?
補充:我是明白slot的用意的,我只是不明白為什么既然在slot機制下,slot部分的控制權(quán)已經(jīng)完全交給父組件了,還要提供子組件的屬性供父組件來使用。
閉關(guān)修行中......
比如你寫了一個對話框組件,發(fā)布后,你的使用者想自定義標(biāo)題部分的樣式或內(nèi)容,比如顯示很多自己定義的按鈕。
此時,你就需要使用這個功能了。
其實這個功能,就是做到了更靈活。
拋磚引玉吧。
普通的slot,在parent中訪問不到child的數(shù)據(jù)。Scoped Slots可以。
官方的例子,一個列表,不同的場景有不同的具體展示方式,但數(shù)據(jù)是相同的。這時可以把列表定義成抽象的,類似interface,具體的implement在使用的時候(parent中)確定。
<list-comp>
<header> title </header>
<ul>
<slot name="item" v-for="item in items" :text="item.text">
<!-- 具體的列表展示形式在parent中使用slot -->
</slot>
</ul>
<footer>other things<footer>
<list-comp>