vue3 插槽详解

在Vue 3中，插槽是一种让父组件能够向子组件传递标记的方法。插槽可以分为默认插槽、具名插槽和作用域插槽。

1. 默认插槽：子组件中预留一个插槽，父组件可以传入任何内容。

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>
 
<!-- 父组件 -->
<template>
  <ChildComponent>
    <p>这是传入子组件的内容</p>
  </ChildComponent>
</template>

2. 具名插槽：子组件中预留多个插槽，父组件可以指定插槽位置。

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot name="main"></slot>
    <slot name="footer"></slot>
  </div>
</template>
 
<!-- 父组件 -->
<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>这是头部内容</h1>
    </template>
    <template v-slot:main>
      <p>这是主体内容</p>
    </template>
    <template v-slot:footer>
      <footer>这是底部内容</footer>
    </template>
  </ChildComponent>
</template>

3. 作用域插槽：子组件通过属性向父组件传递数据。

<!-- 子组件 -->
<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: { name: '张三', age: 30 }
    };
  }
};
</script>
 
<!-- 父组件 -->
<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <p>用户名: {{ slotProps.user.name }}</p>
      <p>用户年龄: {{ slotProps.user.age }}</p>
    </template>
  </ChildComponent>
</template>

在Vue 3中，插槽的使用方法与Vue 2基本相同，但Vue 3推荐使用v-slot指令替代slot和slot-scope。