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>