vue插槽（v-slot）

v-slot是vue在2.6.0中新增的一种用来替代slot-scope的语法。

普通用法

<my-component>
    代替后备内容的内容
</my-component>

在组件中

<template>
  <div>
    <slot>
      在这里可以写后备内容，它会在你没有给插槽提供内容的时候渲染出来  （默认内容也会在这里渲染）  
    </slot>
  </div>
</template>

效果

<template>
  <div>
    代替后备内容的内容
  </div>
</template>

具名插槽（v-slot:可以直接简写成#）

<my-component>
  <template v-slot:header>
    header内容
  </template>
  <template #footer>
    footer内容
  <template>
</my-component>

<template>
  <div>
    <header>
       <slot name="header">
         header的后备内容
       </slot>
    </header>
    <footer>
       <slot name="footer">
        footer的后备内容
      </slot>
    </footer>
  </div>
</template>

效果

<template>
  <div>
    <header>header的内容</header>
    <footer>footer的内容</footer>
  </div>
</template>

作用域插槽

<my-component>
  <template #header="{headers}">
    {{header.value}}
  </template>
  <template #footer="{footers: footer}">
    {{footer.value}}
  </template>
</my-component>

<template>
  <div>
    <slot name="header" :headers="dataHeaders">{{dataHeaders.defaultValue}}</slot>
    <slot name="footer" :footers="dataFooters">{{dataFooters}}</slot>
  <div>
<template>
<script>
export default {
  data() {
    return {
      dataHeader: {
        value: '作用域插槽的value',
        defaultValue: '后备value'
      },
      dataFooter: {
        value: '作用域插槽的value',
        defaultValue: '后备value'
      }
    }
  }  
}
</script>

效果

<template>
  <div>
    作用域插槽的value
  </div>
</template>

动态插槽

<my-component>
  <template #[dynamicSlotName]>
  </template>
</my-component>