vue2.0 $slots.default使用

ur home

于 2021-04-15 10:21:49 发布

阅读量3.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue2.x 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/wz_coming/article/details/115717523

vue2.x 专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何在Vue组件中，通过父子组件交互实现子组件动态渲染，以个性化展示Timeline中的'dot'元素。重点在于`v-if`和`slot`的使用，提升用户体验和代码复用。

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

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

父组件

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

子组件打印信息