一、slot的作用：
slot作为组件用户自定义内容的占位符：
1、简单用法：新建一个myslot的组件：提供一个占位插槽
<template>
<div>
<div>你好</div>
<slot>世界</slot>
</div>
</template>
//在其他页面引入mysolt的组件：
import mysolt from './myslot.vue'
<mysolt>
<p>wolrd</p>
</mysolt>
<slot>世界</slot>会被<p>wolrd</p> <div>new content</div>替换：最终页面会渲染成：
注意如果插槽模板中有多个标签最好用 `<template>`包裹一下
2、插槽的默认内容
<slot>世界</slot> ‘世界’就插槽的默认内容，就是在使用myslot组件时，如果不提供组件的innerHTML就显示默认的内容。如：
<mysolt></mysolt>
页面将渲染如下：
3、具名插槽
如果一个组件里面需要多个占位插槽，那么就需要给不同的插槽提供一个name attribute,一个不带 name 的 <slot> 占位插槽默认名字为“default”，现在 <template> 元素中的所有内容都将会被传入相应的插槽：
用v-solt指定插槽的名字
<template v-solt：xxx> <template>
用法如下：
注意：任何没有被包裹在带有 `v-slot` 的 `<template>`
中的内容都会被视为默认插槽的内容
4、作用域插槽
如果需要使用插槽组件内的数据，必须在插槽组件提供者必须用 v-bind:xxx=xxx 显示给外部插槽模板提供数据,否则取不到。
1、向插槽外部模板提供数据：
<slot name="slot1" v-bind:content="content"></slot>
2、接收插槽组件提供的数据：
<template v-slot:slot1="props">
3、由于props是一个对象所以可以解构里面的属性
用法如下：
渲染结果：
根据以上用法得出结论：
1、使用插槽的组件提供重复的具名插槽模板，后面的覆盖前面的模板如插槽1
2、插槽4取不到content是因为插槽内部不提供数据源
3、在使用插槽组件时，提供的插槽模板的顺序无关，插槽的顺序时由插槽提供者决定。
5、动态具名插槽、插槽缩写;
1、具名插槽的缩写：v-solt:name——> #name
2、具名作用域插槽的缩写：v-solt:name='props'——> #name=props
3、v-solt:[name]
用法：
