使用组件时,有时子组件不知道会收到什么内容,
这是由 父组件 决定的。
一、单个插槽
1.my-component 组件:
<div>
<h2>我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
</div>
2.父组件:
<div>
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
</div>
3.渲染结果:
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div>
二、具名插槽
slot根据不同的name名称分发内容,多个插槽可以有不同的名字。
仍然可以有匿名的默认插槽,为了找不到匹配的内容片段使用,如果没有默认插槽,这些找不到匹配的内容片段将被抛弃。
1.my-component 组件:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
2.父组件:
<my-component>
<h1 slot="header">这里可能是一个页面标题</h1>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
<p slot="footer">这里有一些联系信息</p>
</my-component>
3.渲染结果:
<div class="container">
<header>
<h1>这里可能是一个页面标题</h1>
</header>
<main>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
</main>
<footer>
<p>这里有一些联系信息</p>
</footer>
</div>
三、作用域插槽
作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。
1.子组件:
<div class="child">
<slot text="hello from child"></slot>
</div>
2.父组件:
<div class="parent">
<child>
<template slot-scope="props"> // slot-scope 插槽范围, 自定义一个参数 props
<span>hello from parent</span>
<span>{{ props.text }}</span> // props里面的值拿出来
</template>
</child>
</div>
3.渲染结果:
<div class="parent">
<div class="child">
<span>hello from parent</span>
<span>hello from child</span>
</div>
</div>