本篇(可能此系列会包含很多篇)纯属从Vue官方文档找来的内容,也可能会根据自身的知识情况扩展、延伸、归纳,进行个性化总结排版,方便自己记录和查阅。
在Vue2.6.0中具名插槽和作用域插槽引入了新的统一的语法(v-slot指令)。它取代了 slot 和slot-scope两个特性。
插槽作用域
当父级模板里的内容编译时只会在父级作用域里生效;子模板里的所有内容都是在子作用域里编译。 例子:
# <navigation-link> 组件
<a
v-bind:href="url"
class="nav-link"
>
<slot></slot>
</a>
该插槽跟模板的其它地方一样可以访问相同的实例属性 (也就是相同的“作用域”),而不能访问 的作用域。例如 url 是访问不到的:
<navigation-link url="/profile">
Clicking here will send you to: {{ url }}
<!--
这里的 `url` 会是 undefined,因为 "/profile" 是
_传递给_ <navigation-link> 的而不是
在 <navigation-link> 组件*内部*定义的。
-->
</navigation-link>
具名插槽
有时我们需要多个插槽。例如对于一个带有如下模板的 组件:
<div class="container">
<header>
<!-- 我们希望把页头放这里 -->
</header>
<main>
<!-- 我们希望把主要内容放这里 -->
</main>
<footer>
<!-- 我们希望把页脚放这里 -->
</footer>
</div>
元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
一个不带 name 的 出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候,我们可以在一个