vue slot

一直觉得vue的slot比较申请，而且比较深奥，总有点不想用的感觉，事实上，在一定程度上，也真的可以完全避开slot就能把一个项目完全搭建完成。

但是随着用的次数越来越多，看到的内容也越来越多的情况，突然间，灵光乍现：发现slot也没有那么深奥！

slot是什么？插槽！什么叫插槽？简单粗暴点可以说：插槽内可以放置一些内容，换而言之，其实就是slot可以让我们自定义一些html标签。

Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

　　看一个最简单的例子：

<template>
  <div class="main">
    <slot></slot>
  </div>
</template>
<style>
.main {
  padding: 20px;
}
</style>

　　在一个vue文件当中，我们仅仅定义了一个标签，设置了部分样式（我们也可以设置更多样式），然后在main.js当中，定义一个全局组件

import Container from "@/components/main/Container"
Vue.component('Container', Container)

　　之后，我们就可以在任何一个页面使用Container作为自定义标签，<Container>。。。自定义内容</Container>，所有页面就可以共享这个Container内部定义的所有样式，方法等所有一切可以在vue组件当中定义的内容，甚至提前定义一些内容，这就是插槽的内容分发。

　　突然间，冒出来一个奇怪的想法，是不是可以像react的高阶组件一样理解slot呢？