作用域插槽和具名插槽

在 Vue 2 中，具名插槽和作用域插槽是组件模板中非常强大的内容分发 API。它们允许开发者创建具有更复杂内容结构的组件，同时保持组件模板的清晰和可维护性。

具名插槽（Named Slots）

具名插槽允许你为插槽指定一个名字，使得父组件可以针对不同的插槽提供不同的内容。这在创建具有多个插槽的组件时非常有用。

例如，一个 base-layout 组件可能有三个插槽：一个用于页头，一个用于主要内容，一个用于页脚：

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

父组件可以使用 v-slot 指令来指定内容应该插入哪个插槽：

<base-layout><template v-slot:header><h1>这里可能是页面标题</h1></template><p>这是主要内容的一段。</p><p>这是另一段主要内容。</p><template v-slot:footer><p>这里是一些联系信息</p></template>
</base-layout>

作用域插槽（Scoped Slots）

作用域插槽是一种特殊类型的插槽，用于从子组件传递数据回到父组件的插槽内容中。这允许父组件的插槽内容访问子组件中的数据。

例如，一个 todo-list 组件可能希望将每个 todo 项的数据传递给父组件，以便父组件可以自定义如何显示每个 todo 项：

<ul><li v-for="todo in todos" :key="todo.id"><slot name="item" :todo="todo">{{ todo.text }} <!-- 默认内容 --></slot></li>
</ul>

父组件可以使用一个带有 v-slot 的 template 来定义它如何使用这些数据:

<todo-list :todos="todoList"><template v-slot:item="slotProps"><span v-if="slotProps.todo.isComplete">✓</span>{{ slotProps.todo.text }}</template>
</todo-list>

在这个例子中，slotProps 是一个对象，包含了从子组件传递给插槽的所有属性。在这种情况下，它有一个 todo 属性，可以被用来动态地渲染每个 todo 项。
通过这种方式，具名插槽和作用域插槽提供了一种强大的模式，用于构建高度灵活和可重用的组件。