slot插槽详解及动态插槽的使用
slot插槽的作用：
让用户可以拓展组件，更好地去复用组件，并对其做定制化；
slot的用法：
可以分为三类：默认插槽、具名插槽、作用域插槽
插槽用<slot>标签来确定渲染的位置，里面可以包含默认内容，如果没有提供插槽内容，则显示默认内容；
默认插槽：
子组件中默认插槽名为default，可以省略；
父组件中使用：
- 直接将内容放入组件标签内部；
- v-slot:default或#default
任何没有被包裹在<v-slot>中的内容都会被视为默认插槽的内容。当子组件只有默认插槽时，标签可以直接用在组件上，也就是独占默认插槽的写法；
如果在父组件中使用<template v-slot:default>则先显示此部分内容，再显示其他，下方例子中显示“如果你定义了 default 之后，先显示default的内容，再显示其他“，再显示“父组件”
示例：
// Child.vue
<template><div><main><!-- 默认插槽 --><slot><!-- slot内为后备内容 --><h3>没传内容</h3></slot></main></div>
</template><style scoped>
div{border: 1px solid #000;
}
</style>
父组件：
// Parent.vue
<child><!-- 默认插槽 --><div>默认插槽</div>
</child><child>父组件<!-- 默认插槽 --><template v-slot:default>如果你定义了 default 之后，先显示default的内容，再显示其他</template>
</child>
具名插槽：
具名插槽用name属性来表示插槽的名字，没有name属性为默认插槽；
具名插槽是在默认插槽的基础上加上v-slot属性，值为子组件插槽nam