具名插槽
當我們組件需要用到多個插槽的時候, 需要用到具名插槽:
// subComponent
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
在向上例中, 具名插槽提供內(nèi)容時, 需要在一個 <template> 元素上使用 v-slot 指令, 并以 v-slot 的參數(shù)的形式提供插槽名稱:
// parentComponent
<sub-component>
<template v-slot="header">
<h1>這里是header的插槽內(nèi)容</h1>
</template>
<p>這里是默認插槽的插槽內(nèi)容</p>
<p>And another one.</p>
<template v-slot:footer>
<p>這里是footer的插槽內(nèi)容</p>
</template>
</sub-component>
當然, 也可以在一個 <template> 中包裹默認插槽的內(nèi)容:
// parentComponent
<sub-component>
<template v-slot="header">
<h1>這里是header的插槽內(nèi)容</h1>
</template>
<template v-slot:default>
<p>這里是默認插槽的插槽內(nèi)容</p>
<p>And another one.</p>
</template>
<template v-slot:footer>
<p>這里是footer的插槽內(nèi)容</p>
</template>
</sub-component>
任何的一種寫法都會渲染出:
<div class="container">
<header>
<h1>這里是header的插槽內(nèi)容</h1>
</header>
<main>
<p>這里是默認插槽的插槽內(nèi)容</p>
<p>And another one.</p>
</main>
<footer>
<p>這里是footer的插槽內(nèi)容</p>
</footer>
</div>
作用域插槽
有時候需要讓插槽內(nèi)容能夠訪問到子組件中才有的數(shù)據(jù), 例如在 <user-info> 組件中:
// userInfo
<span>
<slot name="user-info">{{ user.userName }}</slot>
</span>
此時, 在父組件中, 如果想要讓它的后備內(nèi)容顯示用戶的年齡, 以取代用戶名, 如下:
// parentComponent
<current-user>
<template>
{{ user.age }}
</template>
</current-user>
顯然, 這段代碼不會正常的工作, 因為只有 <user-info> 組件中才可以訪問到 user, 而當前提供的內(nèi)容是父組件渲染的锋八。
為了讓 user 在父組件的插槽內(nèi)容可以被使用, 可以將 user 作為 <slot> 元素的一個特性綁定上去:
// userInfo
<span>
<slot name="user-info" v-bind:user="user"></slot>
</span>
綁定在 <slot> 元素上的特性被稱為 插槽prop , 現(xiàn)在在父組件中, 可以給 v-slot 帶一個值來定義剛才提供的 插槽prop 的名字:
// parentComponent
<user-info>
<template v-slot:user-info="slotProps">
{{ slotProps.user.age }}
</template>
</user-info>
獨占默認插槽
當被提供的內(nèi)容只有默認插槽時, 還有著下面的寫法:
// userInfo
<span>
<slot v-bind:user="user"></slot>
</span>
// parentComponent
<user-info v-slot="slotProps">
<template v-slot:default="slotProps">
{{ slotProps.user.age }}
</template>
</user-info>
或者, 將組件的標簽當做插槽的模板, 也就是把 <user-info> 當做 <template> 標簽來使用浙值。這樣就可以把 v-slot 直接卸載組件的標簽上:
// parentComponent
<user-info v-slot:default="slotProps">
{{ slotProps.user.age }}
</user-info>
或者:
// parentComponent
<user-info v-slot="slotProps">
{{ slotProps.user.age }}
</user-info>
注意：默認插槽的縮寫語法不能和具名插槽混用, 否則會導致作用域不明確:
// parentComponent
<!--無效，會導致警告-->
<user-info v-slot="slotProps">
{{ slotProps.user.age }}
<template v-slot:other="otherSlotProps">
slotProps is NOT available here
</template>
</user-info>
只要是出現(xiàn)多個插槽的私爷，必須為所有插槽使用完整的基于 <template> 的語法：
// parentComponent
<user-info>
<template v-slot:default="slotProps">
{{ slotProps.user.age }}
</template>
<template v-slot:other="otherSlotProps">
...
</template>
</user-info>
