vue组件中插槽slot的基本使用

1. 概念

slot 翻译为插槽

为什么使用slot？

• 组件的插槽也是为了让我们封装的组件预留一些空间，更加具有扩展性。
• 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。

---

2. slot 的基本使用

• 最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
• 在子组件中，使用特殊的元素 <slot> 就可以为子组件开启一个插槽。
• <slot></slot> 中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容

<div id="app">
  <cpn></cpn>
  <cpn>
    <h3>啦啦啦啦</h3>
  </cpn>
</div>

<template id="cpn">
  <div>