slot-scope

`<slot>` 元素是 Vue.js 中的一个内置组件，它允许我们在父组件中将子组件的内容插入到指定的位置。 `slot-scope` 是一个用于定义插槽内容的作用域的特殊属性。它允许我们在插槽中访问子组件的数据。

举个例子，我们有一个 `TodoList` 组件和一个 `TodoItem` 组件，我们想在 `TodoList` 中显示所有的 `TodoItem` 组件，同时在 `TodoItem` 组件中有一个按钮，点击该按钮可以将该 `TodoItem` 标记为完成。这时我们可以使用 `<slot>` 元素来将 `TodoItem` 组件插入到 `TodoList` 组件中，同时使用 `slot-scope` 定义一个作用域，访问 `TodoItem` 组件的数据和方法，以便在 `TodoList` 组件中操作 `TodoItem` 组件。

<!-- TodoList.vue -->
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <slot :item="item" :markComplete="markComplete"></slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
  methods: {
    markComplete(id) {
      // 标记完成的逻辑
    },
  },
};
</script>

<!-- TodoItem.vue -->
<template>
  <div>
    <span>{{ item.title }}</span>
    <button @click="markComplete(item.id)">完成</button>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
    markComplete: {
      type: Function,
      required: true,
    },
  },
};
</script>