vue2.0 $slots.default使用

秒速五厘米 2023-01-13 01:38 125阅读 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 条评论，125人围观）

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

相关阅读

相关 vue使用

[详解vue使用Echarts画柱状图\_vue.js\_脚本之家][vue_Echarts_vue.js] 更多图形移步官网： [Examples - Apache EC

Love The Way You Lie/ 2024年03月24日 00:28/ 0 赞/ 61 阅读

相关 manjora20使用体验

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

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

相关使用vue

1、全局安装webpack npm install webpack -g 2、全局安装vue脚手架 npm install -g @vue/cli-init 3、安装

女爷i/ 2022年10月30日 07:28/ 0 赞/ 137 阅读

相关 20_使用拖放

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

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

相关 20 ocLazyLoad使用

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

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

相关 Vue - Vue使用笔记

判断DOM是否渲染完成在生命周期中，mounted周期是dom渲染后执行的。在组件内部，如果需要等待重新给Model赋值后DOM的渲染结束，可以使用`se

小灰灰/ 2022年05月13日 13:00/ 0 赞/ 284 阅读

相关 vue20-父子组件传值

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

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

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

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

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

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

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

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

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

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

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