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属性，值为子组件插槽name属