插槽基本用法

插槽
在Vue中，插槽被用于在组件中定义可变的部分。组件可以将其内部的内容暴露出去，允许父级组件在使用该组件时传入自定义内容。这种传递的内容可以是任何类型的Vue实例，包括文字、HTML标签、其他组件等。

默认插槽示例

// 子组件 ChildComponent.vue
<template>
  <div>
    <h1>子组件</h1>
    <slot></slot>
  </div>
</template>

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

在上面的例子中，我们在子组件中定义了一个插槽，然后在父组件中使用标签，并在标签内部放置了一个

标签作为插槽的内容。当父组件被渲染时，插槽的内容将被替换为实际传入的内容。

具名插槽
在上面的例子中，我们使用的是默认插槽，也就是没有给插槽命名。在某些情况下，我们可能需要定义多个插槽，并且通过名称来区分它们。这就是具名插槽的用法。

具名插槽可以通过在<slot>元素上添加name属性来定义。下面是一个具名插槽的例子：

作用域插槽
除了基本的插槽功能，Vue还提供了一种更强大的插槽功能，即作用域插槽。作用域插槽允许子组件向父组件传递数据，实现更为灵活的组件交互。

作用域插槽使用<slot>元素中的属性来传递数据。下面是一个作用域插槽的例子：

// 子组件 ChildComponent.vue
<template>
  <div>
    <h1>子组件</h1>
    <slot v-bind:user="user"></slot>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      user: {
        name: 'John Doe',
        age: 26
      }
    }
  }
}
</script>

// 父组件 ParentComponent.vue
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent>
      <template v-slot:default="slotProps">
        <h2>用户信息</h2>
        <p>{{ slotProps.user.name }}</p>
        <p>{{ slotProps.user.age }}</p>
      </template>
    </ChildComponent>
  </div>
</template>