Vue.js 中的 slot 是什么？如何使用？

Slot 是 Vue.js 中的一个概念,它允许我们从组件外部向组件内部传递内容。

使用 slot 的步骤:

1. 在子组件中定义 slot:

html 
<div>
  <slot>默认内容</slot>  
</div>

2. 父组件使用 <template> 并在其中指定要插入到哪个 slot 的内容:

html
<Child>
  <template slot="some-slot-name">
    <p>内容</p>
  </template>  
</Child>  

3. 具名 slot:可以在 slot 元素上使用 name 属性指定一个slot的名字。
4. 后备内容:slot 元素中的内容是 slot 的后备内容,只有当父组件未提供插入的内容时才会显示。
5. 编译作用域:父组件模板里的所有内容都会在父组件作用域内编译;子组件模板里的所有内容都会在子组件作用域内编译。

示例:
子组件:

html
<div>
  <slot name="header">默认标题</slot>
  <slot>默认内容</slot>  
</div>

父组件:

html
<Child>  
  <template slot="header"> <h1>标题</h1> </template>
  <p>内容</p>
</Child>    

渲染结果:

<div>
  <h1>标题</h1>  
  <p>内容</p>
</div>  

Slot 让我们可以在封装组件的同时定制组件内容部分。理解 slot 的机制与用法,可以让我们在设计组件时更加灵活和高效。