理解vue中的 slot-scope=“scope“

在Vue中，slot-scope="scope"是用于在父组件中访问子组件的数据的一种方式。通过使用slot-scope，我们可以在父组件中获取子组件中的数据，并进行相应的操作。

具体来说，slot-scope="scope"可以用于以下场景：
1. 在父组件中访问子组件的数据：通过scope.row可以获取当前行的数据对象，scope.row.date可以获取当前行数据对象中的date属性的值。
2. 在父组件中访问子组件的索引：通过scope.$index可以获取当前行的索引。

这样，我们可以在父组件中根据子组件的数据进行一些逻辑处理或展示。

范例：
假设我们有一个子组件Table，其中有一个数据列表dataList，我们想在父组件中展示这个列表，并根据每一行的数据进行一些操作。

<!-- 子组件Table -->
<template>
 <table>
    <tr v-for="(item, index) in dataList" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.gender }}</td>
      <td>
        <slot :row="item" :$index="index"></slot>
      </td>
    </tr>
  </table>
</template>

<!-- 父组件 -->
<template>
  <div>
    <Table :dataList="dataList">
      <template slot-scope="scope">
        <button @click="deleteRow(scope.$index)">删除</button>
      </template>
    </Table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { name: 'Alice', age: 20, gender: 'female' },
        { name: 'Bob', age: 25, gender: 'male' },
        { name: 'Charlie', age: 30, gender: 'male' }
      ]
    };
  },
  methods: {
    deleteRow(index) {
      this.dataList.splice(index, 1);
    }
  }
};
</script>

在上面的例子中，我们通过slot-scope="scope"获取到了子组件Table中的每一行数据对象和索引，然后在父组件中根据这些数据进行了删除操作。