什么是插槽？
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。通俗的说是：slot 是在父组建控制了子组件显示或隐藏相关内容
插槽的分类： 1、普通插槽：通过一个 slot 标签声明一个区域来为它存放实参，
Vue.component('child',{ template:`<div><slot>你好</slot></div>` }) new Vue({ el:'#app', template:`<div><child>hello</child></div>` })如果在上面这个代码中，子组件没有 slot 标签，那么父组件中 hello 文本将会被 忽略。从函数的角度来理解，这里的 slot 相当于一个形参，hello 相当于一个实 参，如果没有 slot 的接收，hello 就渲染不到页面上。Slot 标签中的“你好”是 默认值 default，如果父元素没有传值，将会显示默认值“你好”
2、具名插槽：在一个组件中有多个插槽，调用的时候为了给不同的组件传递 参数就需要为插槽进行命名。为不同需求的组件传递不同的参数。
//具名插槽 Vue.component('child',{ template:`<div> <slot name="header"></slot> <h1><slot name="footer"></slot></h1> </div>` }) new Vue({ el:'#app', template:`<child> <template v-slot:header>This is header</template> <template v-slot:footer>This is footer</template> </child>` })代码中，子组件中有 header 和 footer 两个 name 不同的 flot，他们所接收的文本 根据 name 的不同而接收的值不同。Footer 的 h1 标签也体现了不同值满足不同 的需求。从函数角度出发，具名插槽可以理解为是传递了多个不同参数。 这 里 不 仅 可 以 在 父 组 件 与 子 组 件 中 操 作 ， 也 可 以 通 过 在 html 代码中加入想要加入的片段。
<div id="app"> <child> <template v-slot:header>您好1</template> <template v-slot:footer>您好2</template> </child> </div>3、作用域插槽：作用域插槽的样式由父组件决定，内容却由子组件控制。前 两种插槽不能绑定数据，作用域插槽是一个带绑定数据的插槽。简单的来说就是 子组件提供给父组件参数，该参数仅限于插槽中使用，父组件可以根据子组件传 过来的插槽数据来进行不同的方式展现和填充插槽的内容
//slot插槽，为div中的实共提供插入位置 template:` <div> <p><s1ot :user-"user" :list-"list >slot</s1ot></p> </div>` <div id="app"> <my-div> <template v-slot:default="scope"> {{scope.user.name}}--{{scope.list}} </template> </my-div> </div>在 template 标签中使用 v-slot：default=‘scope’；scope 是 template 标签 中可以使用的作用域对象。scope 中存放着 user、和 list 中的参数。
