slot 插槽的做用域用法(摘自vue.js 官網)

有的時候你但願提供的組件帶有一個可從子組件獲取數據的可複用的插槽。例如一個簡單的 <todo-list> 組件的模板可能包含了以下代碼：

<ul> <li v-for="todo in todos" v-bind:key="todo.id" > {{ todo.text }} </li> </ul>

可是在咱們應用的某些部分，咱們但願每一個獨立的待辦項渲染出和 todo.text 不太同樣的東西。這也是做用域插槽的用武之地。

爲了讓這個特性成爲可能，你須要作的所有事情就是將待辦項內容包裹在一個 <slot> 元素上，而後將全部和其上下文相關的數據傳遞給這個插槽：在這個例子中，這個數據是 todo 對象：

<ul> <li v-for="todo in todos" v-bind:key="todo.id" > <!-- 咱們爲每一個 todo 準備了一個插槽，--> <!-- 將 `todo` 對象做爲一個插槽的 prop 傳入。--> <slot v-bind:todo="todo"> <!-- 回退的內容 --> {{ todo.text }} </slot> </li> </ul>

如今當咱們使用 <todo-list> 組件的時候，咱們能夠選擇爲待辦項定義一個不同的 <template> 做爲替代方案，而且能夠經過 slot-scope 特性從子組件獲取數據：

<todo-list v-bind:todos="todos"> <!-- 將 `slotProps` 定義爲插槽做用域的名字 --> <template slot-scope="slotProps"> <!-- 爲待辦項自定義一個模板，--> <!-- 經過 `slotProps` 定製每一個待辦項。--> <span v-if="slotProps.todo.isComplete">✓</span> {{ slotProps.todo.text }} </template> </todo-list>

在 2.5.0+，slot-scope 再也不限制在 <template> 元素上使用，而能夠用在插槽內的任何元素或組件上。

解構 slot-scope

若是一個 JavaScript 表達式在一個函數定義的參數位置有效，那麼這個表達式實際上就能夠被 slot-scope 接受。也就是說你能夠在支持的環境下 (單文件組件或現代瀏覽器)，在這些表達式中使用 ES2015 解構語法。例如：

<todo-list v-bind:todos="todos"> <template slot-scope="{ todo }"> <span v-if="todo.isComplete">✓</span> {{ todo.text }} </template> </todo-list>

這會使做用域插槽變得更乾淨一些。