v-slot = "{ row }" 是 Vue 2.6+ 的新语法,官方推荐,更简洁、可读性更好。slot-scope="scope" 是老写法,功能等价,但写法啰嗦,未来会被淘汰。
示例对比:
bash
<!-- 新语法 -->
<el-table-column v-slot="{ row }">
<span :class="dayClass(row.mtkyts)">{{ row.mtkyts }}</span>
</el-table-column>
<!-- 老语法 -->
<el-table-column slot-scope="scope">
<span :class="dayClass(scope.row.mtkyts)">{{ scope.row.mtkyts }}</span>
</el-table-column>
| 对比点 | v-slot="{ row }"(新) | slot-scope="scope"(旧) |
|---|---|---|
| Vue 版本 | ≥ 2.6 | 所有 2.x |
| 写法 | 直接解构,一行搞定 | 先取 scope,再 scope.row |
| 可读性 | 模板里只看到 row |
到处都是 scope.xxx |
| 官方态度 | 推荐,长期支持 | 已废弃,3.x 不再支持 |
| 性能 | 相同 | 相同 |