vue中的v-slot详解

v-slot(简写#)

默认插槽简写为#default

在2.6.0中，为具名插槽和作用域插槽引入了一个新的统一的语法，即v-slot。它取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中的attribute中。但是将会在vue 3 中，被废弃的这两个，不会被支持即无效。

1. v-slot具名插槽用法

<child>子组件:

<div>
    <slot name='header' />
</div>

父组件：

<child>
    <template v-slot:header>
        <div>header-text</div>
    </template>
</child>

也可以使用#简写方式

<child>
    <template #header>
        <div>header-text</div>
    </template>
</child>

2. v-slot作用域插槽用法

child子组件：

<div>
    <slot name='footer' :haha="haha" :data="data">
    </slot>
</div>
<script>
export default {
  data () {
    return {
      data: ["小明"，"小李"],
      haha: '这是一个作用域插槽'
    }
  }
}
</script>

父组件:

<child>
   <template v-slot:footer="row">
      <div>{{row.data}}</div>
      <div>{{row.haha}}</div>
   </template>
</child>

使用#简写方式:

<child>
   <template #footer="row">
      <div>{{row.data}}</div>
      <div>{{row.haha}}</div>
   </template>
</child>