vue2中插槽用法详解及案例

Vue.js 的插槽（slots）是 Vue 组件中非常强大的一个功能，它允许你将内容从父组件传递到子组件中，并且可以决定这些内容应该如何渲染。在 Vue 2.x 中，插槽主要有以下几种类型：

1. 默认插槽（匿名插槽）
2. 具名插槽
3. 作用域插槽
   下面将详细介绍这三种插槽的用法及案例。

默认插槽

默认插槽也称为匿名插槽，它不需要指定名字，任何没有被包裹在带有 slot 属性的标签中的内容都会被视为默认插槽的内容。
子组件（ChildComponent.vue）:

<template>
  <div>
    <slot>如果没有提供内容，则显示我</slot>
  </div>
</template>

父组件:

<child-component>
  <p>这是默认插槽的内容</p>
</child-component>

在上面的例子中，<p>这是默认插槽的内容</p> 将会被插入到子组件的 <slot> 标签位置。

具名插槽

具名插槽允许你将内容分发到子组件的不同位置。你可以通过给 slot 标签添加一个 name 属性来定义具名插槽。
子组件（ChildComponent.vue）:

<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- 默认插槽 -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

父组件:

<child-component>
  <template v-slot:header>
    <h1>这是头部内容</h1>
  </template>
  <p>这是默认插槽的内容，将会显示在 main 标签内</p>
  <template v-slot:footer>
    <p>这是底部内容</p>
  </template>
</child-component>

在这个例子中，v-slot 指令用于指定内容应该插入到哪个具名插槽中。

作用域插槽

作用域插槽是一种特殊类型的插槽，允许你从子组件传递数据给父组件，父组件可以使用这些数据来决定如何渲染插槽内容。
子组件（ChildComponent.vue）:

<template>
  <div>
    <slot :user="user">默认内容，当父组件没有提供插槽内容时显示</slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 30
      }
    }
  }
}
</script>

父组件:

<child-component>
  <template v-slot:default="slotProps">
    <div>用户名：{{ slotProps.user.name }}，年龄：{{ slotProps.user.age }}</div>
  </template>
</child-component>

在这个例子中，v-slot:default="slotProps" 是用来接收子组件通过 <slot> 传递的 user 对象，然后我们可以在父组件的模板中使用这个对象的数据。
以上就是 Vue 2.x 中插槽的基本用法和案例。在实际应用中，插槽可以极大地提高组件的复用性和灵活性。