＜template slot-scope=“scope“＞ 和＜template slot-scope=“{row }“＞什么区别

在 Vue.js 中，<template slot-scope> 是 Vue 2.x 版本提供的一种作用域插槽的语法，用于在组件内部获取传递给插槽的数据。

1. <template slot-scope="scope">:

   这种写法会将父组件传递给子组件的所有作用域插槽变量作为一个对象（默认命名为 scope）传入到插槽模板中。这意味着在模板内部，你可以通过 scope.row 访问到当前行的数据对象，以及其他可能存在的作用域属性。

2. <template slot-scope="{ row }">:

   这种写法是对 scope 对象进行了解构赋值，直接提取了 scope 对象中的 row 属性。这样，在模板内部可以直接通过 row 访问到当前行的数据对象，无需再写 scope.row。

举个例子，在 Element UI 的 <el-table> 组件中，每一行数据都会通过 scope.row 传递给列模板，两者的主要区别在于访问行数据时的写法：

• 第一种方式：

  <template slot-scope="scope">
    {{ scope.row.name }}
  </template>

  第二种方式：

  <template slot-scope="{ row }">
    {{ row.name }}
  </template>

  两种方式最终效果是一样的，都是获取到了当前行的数据对象。选择哪种方式取决于个人编程风格和代码可读性需求。

在 Vue.js 的组件中，特别是在使用作用域插槽（Scoped Slots）时，`scope` 对象包含了父组件传递给子组件插槽的上下文数据。这个 `scope` 对象的具体内容取决于子组件如何定义和传递数据。

例如，在 Element UI 的 `<el-table>` 组件中，每列的数据项会通过作用域插槽传递给自定义列模板，此时 `scope` 对象通常包含以下属性：

- `row`: 当前行的数据对象。
- `$index`: 当前行的索引（从 0 开始计数）。
- `column`: 当前列的信息对象，包括列的定义、属性等。
- `store`（可选，如果有开启行拖拽或全选功能的话）: 表格的相关状态存储对象。

其他组件在使用作用域插槽时传递的 `scope` 对象内容也会有所不同。具体包含哪些属性，需要查阅对应组件的官方文档或查看组件内部是如何定义和传递 `scope` 数据的。

另外，可以通过解构赋值语法个性化地从 `scope` 对象中抽取所需的属性，如在 `<template slot-scope="{ row, $index }">` 中，只提取了 `row` 和 `$index` 两个属性。