用插槽实现公告栏垂直滚动，核心是父组件自由定义内容、子组件专注滚动逻辑；默认插槽承载动态内容，作用域插槽支持数据回传与交互定制，需确保容器固定高度与正确溢出设置。

用插槽实现公告栏垂直滚动，核心是把公告内容交给父组件自由定义，子组件只负责滚动逻辑和容器结构。插槽不参与动画，但为内容提供灵活注入点，滚动行为由 CSS 或 JS 控制。

默认插槽承载动态内容

公告栏通常只需一个内容区，用默认插槽最简洁。子组件中写<slot></slot>作为内容挂载点，父组件传入任意结构的公告项（文字、图标、时间戳等），无需预设格式。

• 子组件模板示例：
  <div class="notice-scroll"><slot></slot></div>
• 父组件使用时可传入列表、单条消息或带样式的 div 块，插槽会原样渲染
• 注意：插槽内容必须是直接子节点，不能套在 template 或 v-if 容器里再塞入，否则可能无法被正确分发

滚动容器需手动控制高度与溢出

垂直滚动依赖容器固定高度 + overflow-y: auto 或 JavaScript 滚动动画。插槽本身不提供滚动能力，只是内容载体。

• 给外层容器设固定高度（如 height: 120px）并启用纵向滚动：
  .notice-scroll { height: 120px; overflow-y: scroll; }
• 若需无缝轮播效果，可在子组件内用 setInterval 配合 scrollTop 或 CSS 动画位移，每次滚动前确保插槽内容已渲染完成
• 监听 scroll 事件判断是否到底部，触发加载下一批公告（配合插槽内容更新）

结合作用域插槽增强交互能力

当每条公告需要绑定点击、状态或来源数据时，用作用域插槽把数据“反传”给父组件，让父组件决定如何渲染每一条。

• 子组件中：
  <slot v-for="item in list" :key="item.id" :item="item"></slot>
• 父组件使用：
  <template item><div>{{ item.title }}</div></template>
• 这样每条公告的样式、事件、图标都由父组件掌控，子组件只管滚动节奏和顺序

避免常见空白问题

滚动区域显示为空，大概率不是插槽没生效，而是内容未正确进入滚动容器流或被隐藏。

• 检查插槽内容是否被包裹在 display: none / visibility: hidden 的父元素中
• 确认容器没有设置 overflow: hidden 且高度为 0 或 auto（需明确高度才能触发滚动条）
• 若用 v-show 切换公告列表，需确保 DOM 已插入后再触发动画；v-if 重建时要重置 scrollTop
• Web Components 场景下，<slot></slot> 必须位于 shadow DOM 内，且外部内容必须是 light DOM 直接子节点