Vue-几种插槽(slot)的使用

Vue中插槽一般分为三种：默认插槽、具名插槽和作用域插槽。

1. 默认插槽：

父组件中：

<child>
  <div>这是默认插槽的内容</div>
</child>

子组件中：

<template>
  <div>
    <slot></slot>
  </div>
</template>

2. 具名插槽：

父组件中：

<child>
  <div slot="header">这是头部插槽的内容</div>
  <div slot="footer">这是底部插槽的内容</div>
</child>

子组件中：

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot> <!-- 这是默认插槽 -->
    <slot name="footer"></slot>
  </div>
</template>

3. 作用域插槽：

父组件中：

<child>
  <template scope="slotProps">
    <div>{{ slotProps.text }}</div>
  </template>
</child>

子组件中：

<template>
  <div>
    <slot :text="someText"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      someText: '这是作用域插槽的内容'
    }
  }
}
</script>

在Vue 3.0中，插槽语法有所变化，子组件中不再使用<slot>标签，而是使用v-slot指令：

子组件：

<template>
  <div>
    <slot :text="someText"></slot>
  </div>
</template>

父组件：

<child>
  <template v-slot="slotProps">
    <div>{{ slotProps.text }}</div>
  </template>
</child>