vue2.0 $slots.default使用

秒速五厘米 2023-01-13 01:38 154阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70][]

既然获取分发的内容，应该在子组件里面写这个实例属性。

**父组件**

<ui-timeline v-if="total > 0">
        <ui-timeline-item
          :timelineItemPaddingBottom="50"
          v-for="(item,index) in tableData"
          :key="index"
          :icon="item.icon"
          :fontWeight="item.fontWeight"
          :circle="item.circle"
          :timestamp="item.timestamp">
          <span slot="dot">{
       {index + 1}}</span>
          {
       {item.content}}
        </ui-timeline-item>
      </ui-timeline>

**子组件**

<template>
        <div v-if="$slots.dot">
          <slot name="dot"></slot>
        </div>
    </template>

子组件 打印信息

![20210415102124820.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70]: /images/20221022/c88a089ebd804d148bc08c3da6e2e6a1.png
[20210415102124820.png]: /images/20221022/def6dcdf18bc4d9ebb9502cd6ebd27db.png

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关 clion可以使用C++20

是的，CLion 是一款支持 C 语言开发的集成开发环境(Integrated Development Environment, IDE)。它可以帮助您编写、调试和执行 C 语

蔚落/ 2023年10月08日 20:36/ 0 赞/ 24 阅读

相关教育项目--VUE进阶【二】【20】

后台管理系统集成方案一、VUE-ELEMENT-ADMIN 1、简介 2、安装二、vue-admin-template

本是古典何须时尚/ 2023年10月05日 18:17/ 0 赞/ 60 阅读

相关 Vue这些修饰符节省20%的开发时间

Vue这些修饰符帮我节省20%的开发时间 > 作者：李大雷 > > https://segmentfault.com/a/1190000016786254 为了方便大

系统管理员/ 2023年06月30日 08:36/ 0 赞/ 64 阅读

相关 manjora20使用体验

适合小白日常办公，不适合计算机研究人员 \优点稳定流畅，运行速度比Ubuntu快很多界面优美，UI很好强大的aur软件库应有尽有，几乎是所有软件都

电玩女神/ 2022年12月12日 01:51/ 0 赞/ 237 阅读

相关 20_使用拖放

html5 src>\ \{ float: left; margin: 5px; \} img1 \{ bor

￡神魔★判官ぃ/ 2022年07月16日 16:28/ 0 赞/ 329 阅读

相关 20 ocLazyLoad使用

ocLazyLoad使用参考自[http://dreamapple.leanapp.cn/gitbook/oclazyload-doc/quick-start/quic

迷南。/ 2022年05月26日 10:14/ 0 赞/ 193 阅读

相关 vue20-父子组件传值

下面代码是一个计数器的代码，父组件把初始值传给了子组件，子组件接收后，+1时，又把加的步长传给了父组件，在父组件中显示的总和。 <!DOCTYPE html>

墨蓝/ 2022年05月10日 01:44/ 0 赞/ 326 阅读

相关【Vue】20.vue项目中引入echarts图表遇到的问题

最近做一个公众号有需求是要添加一个图表，自己调查了一下，决定使用ECharts，在vue项目中引入ECharts，由于第一次做图表，还要跟UI设计图保持一致，也是遇到了好多样式

淡淡的烟草味﹌/ 2022年02月14日 18:39/ 0 赞/ 659 阅读

相关（20）打鸡儿教你Vue.js

vue-cli 快速创建工程，工程化项目目录 ![image.png][] ![image.png][image.png 1] ![image.png][image.p

「爱情、让人受尽委屈。」/ 2021年09月29日 05:00/ 0 赞/ 270 阅读

相关 vue项目笔记（20）-localStorage的使用

vue中localStorage的使用在原有的项目中，需要缓存效果。h5中新增了localstorage，可以用于缓存。代码修改如下： store/index

谁借莪１个温暖的怀抱￠/ 2021年09月16日 03:10/ 0 赞/ 526 阅读