sclot-scope在vue3中如何

JiaoJiao Zhang

已于 2022-10-14 10:37:22 修改

阅读量320

点赞数

分类专栏： js 文章标签： servlet spring java 前端 javascript

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

本文链接：https://blog.youkuaiyun.com/VR_dancy/article/details/127315716

版权

js 专栏收录该内容

14 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

<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>