首页 > 其他分享 >具名作用域插槽

具名作用域插槽

时间:2024-08-21 20:49:18浏览次数:12  
标签:headerProps 作用域 插槽 具名 绑定 对象 likes message

插槽中的单一数据绑定

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

使用了一个名为 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>
   

标签:headerProps,作用域,插槽,具名,绑定,对象,likes,message
From: https://www.cnblogs.com/anans/p/18372495

相关文章