首页 分享 slot具名插槽展示数据

slot具名插槽展示数据

来源:花匠小妙招 时间:2025-05-13 18:24

最新推荐文章于 2025-05-11 13:30:19 发布

红红火火恍恍惚惚1 于 2022-11-14 16:28:10 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

关键词由CSDN通过智能技术生成

子组件内容:

<template>

  <div class="card">

    <div class="card-title">

      <slot name="title">{{title}}</slot>

    </div>

    <a-list>

      <a-list-item v-for="(item,index) in items" :key="index">

        <slot name="content" :item="item">{{item}}</slot>

      </a-list-item>

    </a-list>

  </div>

</template>

父组件内容:

<list-card class="right-card " :items="hotSearchs">

        <template slot="title">

          <span class="title-head">热词TOP5</span>

        </template>

        <template #content="{item}">

          <a-tag class="word"># {{ item.word }}</a-tag>

          <span class="count">

            <fire theme="outline" size="24" fill="#333" />

          </span>

        </template>

      </list-card>

父组件引入子组件方式:#comtent = {item}

或者:v-slot:content = "scoped"

相关知识

Vue3+TS后台管理系统项目完结撒花(已部署)
佳能EOS R5将采用SD+CFexpress双存储卡插槽设计
花艺后台管理系统项目案例
Vue3 <script setup lang=“ts“> 使用指南
2024年Web前端最新前端VUE【实战】—— antd tree树形控件进行增删改查父子节点,前端开发工程师面试问题
昆明花卉数据展示平台月底建成
用鸢尾花数据集为例展示数据分析的一般流程
创新玫瑰图展示:数据可视化实战教程.zip
python数据分析与展示
神经网络分类鸢尾花数据与可视化展示

网址: slot具名插槽展示数据 https://www.huajiangbk.com/newsview1947029.html

所属分类:花卉
上一篇: python分析鸢尾花数据
下一篇: 数据库查询字段中如果为null,

推荐分享