vue中slot用法详解

在Vue.js开发中，slot（插槽）是一个非常强大且实用的特性，它允许我们在组件之间进行内容分发和复用，极大地提高了组件的灵活性和可扩展性。

什么是slot

简单来说，slot就是在组件中预留的一个占位符，父组件可以通过这个占位符向子组件传递特定的内容。比如，我们有一个通用的卡片组件，卡片的标题、正文等内容可能会根据不同的使用场景而变化，这时就可以使用slot来实现内容的动态填充。

匿名插槽

匿名插槽是最基本的插槽用法。在子组件中，使用<slot>标签来定义插槽的位置。当父组件使用这个子组件时，在子组件标签内部编写的内容就会替换掉<slot>标签。例如：

<!-- 子组件 -->
<template>
  <div>
    <h2>卡片标题</h2>
    <slot></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <card-component>
    <p>这是卡片的具体内容</p>
  </card-component>
</template>

具名插槽

当一个组件中有多个插槽时，就需要使用具名插槽来区分它们。在子组件中，通过给<slot>标签添加name属性来定义插槽的名称。在父组件中，使用<template>标签，并通过v-slot指令指定要插入的插槽名称。例如：

<!-- 子组件 -->
<template>
  <div>
    <h2>卡片标题</h2>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <card-component>
    <template v-slot:content>
      <p>这是卡片的具体内容</p>
    </template>
    <template v-slot:footer>
      <p>这是卡片的底部信息</p>
    </template>
  </card-component>
</template>

作用域插槽

作用域插槽允许子组件向父组件传递数据。在子组件中，通过在<slot>标签上绑定属性来传递数据。在父组件中，通过v-slot指令接收这些数据。例如：

<!-- 子组件 -->
<template>
  <div>
    <slot :data="userInfo"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: { name: '张三', age: 20 }
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <user-component>
    <template v-slot="slotProps">
      <p>姓名：{{ slotProps.data.name }}</p>
      <p>年龄：{{ slotProps.data.age }}</p>
    </template>
  </user-component>
</template>

通过合理使用slot，我们可以更好地组织和复用Vue组件，使代码更加清晰和易于维护。