exercises.md 1.2 KB
Newer Older
1 2
# 插槽

Z
zhaoss 已提交
3
  <div style="color: pink;font-size:22px;font-weight:700">小常识:</div>
4 5 6 7 8 9 10 11 12 13 14
<br>

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

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

可能会渲染出这样的东西:<br>
Z
zhaoss 已提交
15 16
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/7a782ff974ab4eee995d84c15b2a81f1.png)
<br/>
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34


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

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

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

Z
zhaoss 已提交
35
 <div style="color: blue;font-size:22px;font-weight:700">小测试:</div>
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56


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

## 答案

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

## 选项

### A

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

### B

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

### C

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