Vue中HTML slot插槽如何与slot-scope作用域实现数据绑定？

本文共计822个文字，预计阅读时间需要4分钟。

在HTML原生Web Components中，没有使用``这样的方式来设置样式。通常，样式是通过CSS来定义的。例如：

HTML 中的 slot 只做一件事：内容投影

原生 slot 是 Web Components 规范的一部分，运行在 Shadow DOM 内，它只接收父级传入的节点并插入到指定位置。它不支持绑定子组件内部数据，也不解析 v-slot、scope 或 slot-scope 这类 Vue 专属语法。

• 父元素写在自定义元素标签内的内容，会被浏览器自动收集为 assignedNodes() 结果
• name 属性用于匹配具名插槽，无 name 即默认插槽
• 后备内容（fallback）只在没内容可投递时渲染，例如 <slot><p>缺省文案</p></slot>
• 不能访问宿主元素内部状态，比如无法把 this.count 传给 slot 内容

Vue 的 slot 是对原生机制的语义增强

Vue 把原生 slot 的“占位+投递”逻辑保留下来，但用编译时处理 + 运行时上下文注入，实现了数据穿透。