如何在Vue中使用slot定义组件

（一）前言

在react中，可以将组件理解为上下层级，使用children在子层级作为嵌套渲染，但是vue提供方案为slot，并且相对于react，还提供插槽的扩展功能，主要分为三种，匿名插槽（类似与children），具名插槽，作用域插槽 (可以提供数据绑定)。

(二) 匿名插槽

类似与react的children。

我们举个粟子。

首先我们写个组件如下

<template>
  <div class="demo-view">
    <div>这是子组件</div>
    <slot></slot>
  </div>
</template>

这时候我们在父组件调用就是这样

<Demo>
   <div style="color: blue;">这是嵌套内部组件</div>
 </Demo>

那么显示是怎么样的

嵌套的html模板最为子元素传递进入，那么如何嵌套，将不会显示slot标签。

(三) 具名插槽

顾名思义就是给子组件slot提供标识的name，场景可以定义不同的插槽，根据名字实现外部组件选择显示什么。

我们来扩展上面的组件

<template>
  <div class=