# 插槽

  <div style="color: pink;font-size:22px;font-weight:700">小常识：</div>
<br>

下方的alert-box是一个组件，和 HTML 元素一样，我们经常需要向一个组件传递内容，像这样：

```javascript
<alert-box>
  Something bad happened.
</alert-box>
```

可能会渲染出这样的东西：<br>
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/7a782ff974ab4eee995d84c15b2a81f1.png)
<br/>


幸好，Vue 自定义的 `<slot>` 元素让这变得非常简单：

```javascript
Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})
```

如你所见，我们只要在需要的地方加入插槽就行了——就这么简单！
<br>

 <div style="color: blue;font-size:22px;font-weight:700">小测试：</div>


下列关于插槽描述错误的是？<br/><br/>

## 答案

Vue中使用插槽是为了解决解决组件美观问题。

## 选项

### A

插槽就是子组件中的提供给父组件使用的一个占位符

### B

父组件可以在插槽中添加 HTML、组件等填充信息。

### C

具名插槽通俗的讲其实就是给插槽取个名字。