在我们使用vue组件的时候,通常需要向组件传递内容,向这样
<alert-box>
这是一个插槽
</alert-box>
这时候我们就需要用到slot元素。官方文档对于插槽的介绍并不容易理解,对于初学者来说并不算友好。总的来说,slot插槽大致分为三类。
- 插槽基本使用(匿名插槽)
父组件向子组件传递内容
<div id="app">
<alert-box>有bug发生</alert-box>
<alert-box>有一个警告</alert-box>
<alert-box></alert-box>
</div>
Vue.component('alert-box', {
template: `
<div>
<strong>ERROR:</strong>
<slot>默认内容</slot>
</div>
`
})
分别显示为
ERROR: 有bug发生
ERROR: 有一个警告
ERROR: 默认内容
- 具名插槽的用法
有时候,我们需要有多个插槽,显示不同的格式
<div class="container">
<header>
<!-- 我们希望把页头放这里 -->
</header>
<main>
<!-- 我们希望把主要内容放这里 -->
</main>
<footer>