Vue2作用域插槽怎么向父组件暴露子组件内部的数据供自定义渲染-Vue.js-PHP中文网

作用域插槽是vue 2中父组件获取子组件内部数据并自定义渲染的核心机制，子组件通过v-bind在slot上绑定数据，父组件用v-slot解构接收并在自身作用域直接使用。

vue2作用域插槽怎么向父组件暴露子组件内部的数据供自定义渲染

作用域插槽在 Vue 2 中是让父组件拿到子组件内部数据、实现自定义渲染的关键机制。它不是简单地“塞内容进去”，而是“带数据地交出渲染权”。

子组件负责发数据，父组件负责收数据并决定怎么画

子组件怎么把数据传出去

子组件在 <slot></slot> 标签上用 slot-scope（Vue 2.6 之前）或 v-bind（Vue 2.6+ 推荐）绑定变量，把内部状态、循环项、索引等“托付”给插槽。

Vue 2.5 及更早写法（已过时但需兼容时可见）：

<slot :user="currentUser" :index="i" slot-scope="props"></slot>

Vue 2.6+ 正确写法（推荐）：
```
<slot :user="currentUser" :index="i"></slot>
```
注意：这里没有 slot-scope，也不需要 props；绑定的是真实数据，不是占位符。

check-vue-style
检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

关键点：

必须显式用 : 或 v-bind: 绑定属性，比如 :user="xxx"，否则父组件收不到
可以传任意数量的属性，支持对象、数组、布尔值、方法（谨慎暴露方法）
插槽必须有绑定，空 <slot></slot> 是普通插槽，不带数据

父组件怎么接收并使用这些数据

父组件用 v-slot（或简写 #default）解构接收，变量就在当前模板作用域里直接可用。

<childcomponent :list="users"><template v-slot:default="{ user, index }"><div class="item">
      <strong>{{ user.name }}</strong>
      <span>第 {{ index + 1 }} 位</span>
      <small v-if="user.isAdmin">（管理员）</small>
    </div>
  </template></childcomponent>

常见写法变体：

解构多个字段：v-slot="{ user, index, isActive }"
只传一个对象，不解构：v-slot="slotProps" → 用 {{ slotProps.user.name }}
具名作用域插槽：v-slot:header="{ title }"，对应子组件 <slot name="header" :title="pageTitle"></slot>
默认插槽不能省略 v-slot:default 或 #default，直接写在标签内会失效

实际场景：列表项样式完全由父组件控制

假设子组件只管请求和遍历用户数据，不关心怎么展示：

<!-- UserList.vue（子组件） -->
<template><ul class="user-list">
<li v-for="(u, i) in users" :key="u.id">
      <slot :user="u" :index="i" :is-even="i % 2 === 0"></slot>
</li>
  </ul></template>

父组件自由定制：

<userlist :users="data"><template user iseven><div :class="{ 'highlight': isEven }">
      ? {{ user.name }} —— {{ user.email }}
    </div>
  </template></userlist>