【转】[Vue] slot 的用法

转自：kimi.ai

在Vue.js中，slot 是一个非常强大的功能，用于实现组件的可定制性。它允许父组件向子组件插入自定义内容，从而提高组件的复用性和灵活性。以下是slot的主要作用和使用场景：

1. 内容分发（Content Distribution）

slot 允许父组件在子组件的特定位置插入自定义内容。这使得子组件可以定义一个或多个插槽，父组件可以在这些插槽中插入自己的内容。

示例：

子组件（ChildComponent.vue）

vue复制

<template>
  <div class="child-component">
    <slot>默认内容</slot>
  </div>
</template>

父组件

vue复制

<template>
  <div>
    <ChildComponent>
      <p>这是父组件插入的内容</p>
    </ChildComponent>
  </div>
</template>

在这个例子中，父组件通过<ChildComponent>标签插入了自定义内容<p>这是父组件插入的内容</p>，如果父组件没有提供内容，则会显示默认内容默认内容。

2. 具名插槽（Named Slots）

具名插槽允许子组件定义多个插槽，并通过name属性区分它们。父组件可以通过slot属性或v-slot指令将内容插入到指定的插槽中。

示例：

子组件（ChildComponent.vue）

vue复制

<template>
  <div class="child-component">
    <slot name="header">默认头部内容</slot>
    <slot name="body">默认主体内容</slot>
    <slot name="footer">默认底部内容</slot>
  </div>
</template>

父组件

vue复制

<template>
  <div>
    <ChildComponent>
      <template v-slot:header>
        <h1>自定义头部</h1>
      </template>
      <template v-slot:body>
        <p>自定义主体内容</p>
      </template>
      <template v-slot:footer>
        <p>自定义底部内容</p>
      </template>
    </ChildComponent>
  </div>
</template>

在这个例子中，子组件定义了三个具名插槽header、body和footer，父组件通过v-slot:header、v-slot:body和v-slot:footer将内容插入到相应的插槽中。

3. 作用域插槽（Scoped Slots）

作用域插槽允许子组件向父组件传递数据，父组件可以在插槽中访问这些数据并进行自定义渲染。这使得父组件可以基于子组件提供的数据来渲染内容。

示例：

子组件（ChildComponent.vue）

vue复制

<template>
  <div class="child-component">
    <slot :user="user">默认内容</slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: 'John Doe', age: 30 }
    };
  }
};
</script>

父组件

vue复制

<template>
  <div>
    <ChildComponent v-slot:default="slotProps">
      <p>用户姓名: {{ slotProps.user.name }}</p>
      <p>用户年龄: {{ slotProps.user.age }}</p>
    </ChildComponent>
  </div>
</template>

在这个例子中，子组件通过slot传递了一个user对象，父组件通过v-slot:default="slotProps"接收这个对象，并在插槽中使用slotProps.user.name和slotProps.user.age来渲染用户信息。

4. 默认插槽（Default Slots）

默认插槽是不带任何名称的插槽，通常用于子组件中只有一个插槽的场景。父组件可以直接将内容插入到默认插槽中。

示例：

子组件（ChildComponent.vue）

vue复制

<template>
  <div class="child-component">
    <slot>默认内容</slot>
  </div>
</template>

父组件

vue复制

<template>
  <div>
    <ChildComponent>
      <p>这是父组件插入的内容</p>
    </ChildComponent>
  </div>
</template>

在这个例子中，父组件通过<ChildComponent>标签插入了自定义内容<p>这是父组件插入的内容</p>，如果父组件没有提供内容，则会显示默认内容默认内容。

总结

slot在Vue.js中提供了强大的内容分发机制，使得组件可以更加灵活和可定制。通过使用默认插槽、具名插槽和作用域插槽，开发者可以轻松地在组件之间传递和渲染自定义内容，从而提高组件的复用性和灵活性。