Vue插槽 (七)

插槽的指令是v-slot。
插槽用于实现内容分发，在开发组件的时候经常用到。
注意2.6.0后具名插槽和作用域插槽新的语法 v-slot取代了slot和 slot-scope这两个目前已被废弃但未被移除且仍在文档中的 attribute。

1. 匿名插槽

如果当组件只有一个地方需要插入dom，那么可以使用匿名插槽。

// parent
<template>
  <div class="page">
    <hello-slot>
      <div>匿名插槽</div>
    </hello-slot>
  </div>
</template>

<script>

import HelloSlot from '@/components/HelloSlot.vue'
export default {
     
     
  components: {
     
     
    HelloSlot
  }
}
</script>

// child
<template>
  <div class="slot">
    <slot></slot>
  </div>
</template>

得到的dom结构如下：

2. 具名插槽

当组件中有多个位置需要插入dom，就需要给插槽提供名称来找到对应位置。
具名插槽是通过v-slot和slot添加name来实现，他们的默认name是default。
v-slot必须写在template上，如果没有被template包裹则会视为是默认插槽的内容。
v-slot的简写为#。
如：

// parent
<template>
  <div class="page">
    <hello-slot>
      <!-- 正常写法 -->
      <template v-slot:header>
        <div>我是具名插槽的头</div>
      </template>
      <!-- 简写 -->
      <template #footer>
        <div>我是具名插槽的尾</div>
      </template>
      <!-- 默认name -->
      <div>默认位置</div>
    </hello-slot>
  </div>
</template>

<script>

import HelloSlot from '@/components/HelloSlot.vue'
export default {
     
     
  components: {
     
     
    HelloSlot
  }
}
</script>

// child
<template>
  <div class="slot">
    <!-- 头 -->
    <slot name="header"></slot>
    <!-- 默认位置 name="default" -->
    <slot></slot>
    <!-- 尾 -->
    <slot name="footer"></slot>
  </div>
</template>

得到的dom结构如下：

3. 作用域插槽

作用域插槽是为了让插槽能够访问子组件的数据。

// parent
<template>
  <div class="page">
    <hello-slot>
      <template #header="slotProps">
        <!-- 使用子组件的数据展示 -->
        <div>{
   
   { slotProps.user.name }}</div>
      </template>
    </hello-slot>
  </div>
</template>

<script>

import HelloSlot from '@/components/HelloSlot.vue'
export default {
     
     
  components: {
     
     
    HelloSlot
  }
}
</script>

// child
<template>
  <div class="slot">
    <slot name="header" :user="user"></slot>
  </div>
</template>

<script>
export default {
     
     
  data () {
     
     
    return {
     
     
      user: {
     
     
        name: '小明',
        age: 18
      }
    }
  }
}
</script>

4. 动态插槽名

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

<hello-slot>
  <template v-slot:[name]>
    ...
  </template>
</hello-slot>