【Vue】插槽

一、定义

• 在Vue组件中，<slot>元素用作一个占位符，表示该位置可以插入父组件传入的自定义内容。
• 插槽是组件间内容分发的一种方式，它允许父组件在使用子组件时，向子组件的特定位置插入内容。

二、类型

Vue中的插槽主要分为以下几种类型：

1. 默认插槽
   • 定义：没有指定name属性的<slot>元素即为默认插槽。
   • 示例：在子组件中定义一个默认插槽<slot></slot>，父组件可以通过直接放置内容到子组件标签内来填充这个插槽。
2. 具名插槽
   • 定义：通过给<slot>元素添加name属性来定义具名插槽。具名插槽允许在子组件中定义多个插槽，并通过不同的名称来区分它们。
   • 示例：在子组件中定义<slot name="header"></slot>和<slot name="footer"></slot>，父组件则可以通过<template v-slot:header>...</template>和<template v-slot:footer>...</template>来分别填充这些插槽。
3. 作用域插槽
   • 定义：作用域插槽是一种特殊的插槽，它允许子组件向父组件传递数据，使得父组件可以根据这些数据来渲染插槽内容。
   • 示例：在子组件中定义<slot :user="user"></slot>，其中user是子组件的一个数据对象。父组件则可以通过<template v-slot:default="slotProps">{{ slotProps.user.name }}</template>来接收这些数据并渲染。
4. 动态插槽
   • Vue允许在运行时动态选择要使用的插槽。这可以通过将v-slot的值设置为一个动态属性值来实现。
   • 示例：父组件可以根据条件动态地选择填充哪个插槽，例如<template v-slot:[dynamicSlotName]="slotProps">...</template>，其中dynamicSlotName是一个根据条件动态计算得到的插槽名称。

三、默认值

• 如果父组件没有在插槽中指定内容，子组件可以定义插槽的默认值。
• 这通过在<slot>元素内部放置后备内容来实现。
• 如果父组件没有提供任何内容，则这些后备内容会被渲染出来。

四、插槽的作用

• 插槽使得组件间的内容分发变得更加灵活和强大。
• 通过插槽，开发者可以定义出高度可复用的组件，同时保持组件的灵活性和可扩展性。
• 例如，一个列表组件可以通过插槽来允许用户自定义列表项的渲染方式，从而满足不同的需求。