具名作用域插槽

插槽中的单一数据绑定

一种较为简单的场景，即插槽传递单一数据。这种情况下，插槽中的内容可以接受一个传入的数据，然后在组件中使用.

使用了一个名为 header 的插槽，并通过 message="hello" 将一个字符串 “hello” 作为 headerProps 传递给插槽。这里的 headerProps 是一个对象，包含了我们传递的 message，因此在插槽中可以通过 headerProps.message 来访问这个值

<MyComponent>
<template #header="headerProps">
  {{ headerProps }}
</template>

<template #default="defaultProps">
  {{ defaultProps }}
</template>

<template #footer="footerProps">
  {{ footerProps }}
</template>
</MyComponent>

在mycomponent组件
<template>
  <div>
    <slot name="header" message="hello"></slot>
    <slot name="default"></slot>
    <slot name="footer"></slot>
  </div>
</template>

 

插槽中的对象绑定

在更复杂的应用场景中，我们可能需要在插槽中传递多个数据。这时，使用对象绑定是更为简洁和灵活的方式。对象绑定允许我们将一个完整的数据对象传递给插槽，并在插槽内解构使用这些数据。

每个 item 对象通过 v-bind 绑定到插槽中，插槽内的 template 使用解构赋值直接获取 body、username 和 likes 属性。这种方式非常直观，尤其在处理复杂数据时，能够使代码更加清晰易读。

<FancyList :api-url="url" :per-page="10">
<template #item="{ body, username, likes }">
  <div class="item">
    <p>{{ body }}</p>
    <p>by {{ username }} | {{ likes }} likes</p>
  </div>
</template>
</FancyList>
在组件里
<ul>
<li v-for="item in items">
  <slot name="item" v-bind="item"></slot>
</li>
</ul>