具名插槽
当我们组件需要用到多个插槽的时候, 需要用到具名插槽:
// subComponent
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
在向上例中, 具名插槽提供内容时, 需要在一个 <template> 元素上使用 v-slot 指令, 并以 v-slot 的参数的形式提供插槽名称:
// parentComponent
<sub-component>
<template v-slot="header">
<h1>这里是header的插槽内容</h1>
</template>
<p>这里是默认插槽的插槽内容</p>
<p>And another one.</p>
<template v-slot:footer>
<p>这里是footer的插槽内容</p>
</template>
</sub-component>
当然, 也可以在一个 <template> 中包裹默认插槽的内容:
// parentComponent
<sub-component>
<template v-slot="header">
<h1>这里是header的插槽内容</h1>
</template>
<template v-slot:default>
<p>这里是默认插槽的插槽内容</p>
<p>And another one.</p>
</template>
<template v-slot:footer>
<p>这里是footer的插槽内容</p>
</template>
</sub-component>
任何的一种写法都会渲染出:
<div class="container">
<header>
<h1>这里是header的插槽内容</h1>
</header>
<main>
<p>这里是默认插槽的插槽内容</p>
<p>And another one.</p>
</main>
<footer>
<p>这里是footer的插槽内容</p>
</footer>
</div>
作用域插槽
有时候需要让插槽内容能够访问到子组件中才有的数据, 例如在 <user-info> 组件中:
// userInfo
<span>
<slot name="user-info">{{ user.userName }}</slot>
</span>
此时, 在父组件中, 如果想要让它的后备内容显示用户的年龄, 以取代用户名, 如下:
// parentComponent
<current-user>
<template>
{{ user.age }}
</template>
</current-user>
显然, 这段代码不会正常的工作, 因为只有 <user-info> 组件中才可以访问到 user, 而当前提供的内容是父组件渲染的。
为了让 user 在父组件的插槽内容可以被使用, 可以将 user 作为 <slot> 元素的一个特性绑定上去:
// userInfo
<span>
<slot name="user-info" v-bind:user="user"></slot>
</span>
绑定在 <slot> 元素上的特性被称为 插槽prop , 现在在父组件中, 可以给 v-slot 带一个值来定义刚才提供的 插槽prop 的名字:
// parentComponent
<user-info>
<template v-slot:user-info="slotProps">
{{ slotProps.user.age }}
</template>
</user-info>
独占默认插槽
当被提供的内容只有默认插槽时, 还有着下面的写法:
// 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>
只要是出现多个插槽的，必须为所有插槽使用完整的基于 <template> 的语法：
// parentComponent
<user-info>
<template v-slot:default="slotProps">
{{ slotProps.user.age }}
</template>
<template v-slot:other="otherSlotProps">
...
</template>
</user-info>
