sclot-scope在vue3中如何

原创已于 2022-10-14 10:37:22 修改 · 350 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #spring #java #前端 #javascript

于 2022-10-14 10:36:41 首次发布

js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个父组件如何通过模板插槽传递内容到子组件，并展示了子组件如何接收这些内容并进行展示的例子。父组件使用了具名插槽的方式将特定的数据传递给子组件，而子组件则利用该数据动态地生成内容。

父组件

<template  v-slot:content="{ content }">
      <ArtOriginalArtworkCard :artWork="content" />
</template>

子组件

<div class="img-box default-card-animation" v-for="(item, index) in imgsArr_c" :key="index":style="{width: imgWidth + 'px'}" ref="imgBox">
      <img :data-src="item.image_url_list[0]" :style="{width: imgWidth + 'px', height: item._height + 'px'}" />
      <slot name="content" :content="item"></slot>
</div>