exercises.md 1.1 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
# 插槽

  <div style="color: pink;">几何小常识:</div>
<br>

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

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

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


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

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

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

 <div style="color: pink;">心凉小测试:</div >


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

## 答案

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

## 选项

### A

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

### B

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

### C

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