Vue插槽 (Slots)详解

前言

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>