Vue插槽原理與用法詳解

5 作用域插槽

2.1.0+ 新增

有的時(shí)候你希望提供的組件帶有一個(gè)可從子組件獲取數(shù)據(jù)的可復(fù)用的插槽。例如一個(gè)簡(jiǎn)單的 <todo-list> 組件的模板可能包含了如下代碼：

Vue.component('todo-list',{
 template:`
 <ul>
 <li
 v-for="todo in todos"
 v-bind:key="todo.id">
 {{ todo.text }}
 </li>
 </ul>
 `
 });

但是在我們應(yīng)用的某些部分，我們希望每個(gè)獨(dú)立的待辦項(xiàng)渲染出和 todo.text 不太一樣的東西。這也是作用域插槽的用武之地。

為了讓這個(gè)特性成為可能，你需要做的全部事情就是將待辦項(xiàng)內(nèi)容包裹在一個(gè) <slot> 元素上，然后將所有和其上下文相關(guān)的數(shù)據(jù)傳遞給這個(gè)插槽：在這個(gè)例子中，這個(gè)數(shù)據(jù)是 todo 對(duì)象：

<ul>
 <li
 v-for="todo in todos"
 v-bind:key="todo.id"
 >
 <!-- 我們?yōu)槊總€(gè) todo 準(zhǔn)備了一個(gè)插槽，-->
 <!-- 將 `todo` 對(duì)象作為一個(gè)插槽的 prop 傳入。-->
 <slot v-bind:todo="todo">
 <!-- 回退的內(nèi)容 -->
 {{ todo.text }}
 </slot>
 </li>
</ul>

現(xiàn)在當(dāng)我們使用 <todo-list> 組件的時(shí)候，我們可以選擇為待辦項(xiàng)定義一個(gè)不一樣的<template> 作為替代方案，并且可以通過 slot-scope 特性從子組件獲取數(shù)據(jù)：

<todo-list v-bind:todos="todos">
 <!--插槽作用域的名字是 slotProps-->
 <template slot-scope="slotProps">
 <!-- 為指定的待辦項(xiàng)定義一個(gè)模板-->
 <span v-if="slotProps.todo.isComplete">✓</span>
 {{ slotProps.todo.text }}
 </template>
</todo-list>

在 2.5.0+，slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽內(nèi)的任何元素或組件上。

解構(gòu) slot-scope

如果一個(gè) JavaScript 表達(dá)式在一個(gè)函數(shù)定義的參數(shù)位置有效，那么這個(gè)表達(dá)式實(shí)際上就可以被 slot-scope 接受。也就是說你可以在支持的環(huán)境下 單文件組件或現(xiàn)代瀏覽器)，在這些表達(dá)式中使用 ES2015 解構(gòu)語(yǔ)法。例如：

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

這會(huì)使作用域插槽變得更干凈一些。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com