Vue插槽 (Slots)详解

news2024/9/8 23:50:07

前言

Vue的插槽（Slots）是一个非常强大的特性，它允许你在组件的模板中嵌入父组件的内容。插槽使得组件之间的内容分发变得灵活，尤其在构建可复用组件时非常有用。本文将详细讲解Vue插槽的各种使用方法，并通过实例展示它们的实际应用。

基础插槽

基础插槽用于在子组件中定义一个内容占位符，父组件可以向子组件传递内容，这些内容将插入到子组件的插槽中。

示例代码

子组件（ChildComponent.vue）

<template>
  <div>
    <h2>子组件内容</h2>
    <slot></slot>
  </div>
</template>

父组件（ParentComponent.vue）

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

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

解释

在父组件中，通过 <ChildComponent> 标签向子组件传递了一段 <p> 标签的内容。这段内容将会在子组件的 <slot></slot> 位置渲染。

具名插槽

具名插槽允许我们为插槽指定一个名字，以便在子组件中定义多个插槽，并在父组件中分别填充不同的内容。

示例代码

子组件（ChildComponent.vue）

<template>
  <div>
    <h2>子组件内容</h2>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

父组件（ParentComponent.vue）

<template>
  <div>
    <h1>父组件内容</h1>
    <ChildComponent>
      <template v-slot:header>
        <p>这是头部内容</p>
      </template>
      <p>这是默认插槽中的内容</p>
      <template v-slot:footer>
        <p>这是底部内容</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

解释

通过在父组件中使用 v-slot:header 和 v-slot:footer 指令，分别向子组件的 header 和 footer 具名插槽传递了内容。默认插槽的内容则直接写在 <ChildComponent> 标签中。

作用域插槽

作用域插槽（Scoped Slots）用于在插槽中传递数据或方法，父组件可以使用这些数据或方法来渲染插槽内容。

示例代码

子组件（ChildComponent.vue）

<template>
  <div>
    <h2>子组件内容</h2>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Alice',
        age: 25
      }
    };
  }
};
</script>

父组件（ParentComponent.vue）

<template>
  <div>
    <h1>父组件内容</h1>
    <ChildComponent v-slot:default="slotProps">
      <p>用户名: {{ slotProps.user.name }}</p>
      <p>用户年龄: {{ slotProps.user.age }}</p>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

解释

子组件通过 <slot :user="user"></slot> 将 user 对象传递给插槽。父组件通过 v-slot:default="slotProps" 接收插槽属性，并使用这些属性渲染内容。

默认插槽

默认插槽是指没有指定名字的插槽，默认插槽的内容会在具名插槽未使用时进行渲染。

示例代码

子组件（ChildComponent.vue）

<template>
  <div>
    <h2>子组件内容</h2>
    <slot></slot>
  </div>
</template>

父组件（ParentComponent.vue）

<template>
  <div>
    <h1>父组件内容</h1>
    <ChildComponent>
      <p>这是默认插槽中的内容</p>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

解释

在没有指定插槽名字的情况下，父组件传递的内容会被渲染在默认插槽中。

动态插槽名

动态插槽名允许我们使用动态值来定义插槽的名字。

示例代码

子组件（ChildComponent.vue）

<template>
  <div>
    <h2>子组件内容</h2>
    <slot :name="dynamicSlotName"></slot>
  </div>
</template>

<script>
export default {
  props: ['dynamicSlotName']
};
</script>

父组件（ParentComponent.vue）

<template>
  <div>
    <h1>父组件内容</h1>
    <ChildComponent :dynamicSlotName="slotName">
      <template v-slot:[slotName]>
        <p>这是动态插槽中的内容</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      slotName: 'header'
    };
  },
  components: {
    ChildComponent
  }
};
</script>