span slot-scope

在 Vue.js 中，`<span>` 元素通常用于表示文本片段，而 `slot-scope` 是用于访问插槽内容的一种方式。结合起来使用，可以在父组件中访问子组件中的插槽内容。

假设有一个父组件和一个子组件，子组件中有一个插槽，而父组件想要访问这个插槽内容并将其包裹在 `<span>` 元素中。可以使用 `slot-scope` 属性来实现这个目标。

示例代码如下：

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <div>
    <child-component>
      <template v-slot:default="props">
        <span>{{ props.slotContent }}</span>
      </template>
    </child-component>
  </div>
</template>

在这个例子中，子组件中的插槽内容可以是任意的，父组件通过 `v-slot:default` 定义了一个插槽，并使用 `props` 对象来访问插槽内容。然后，将插槽内容包裹在 `<span>` 元素中进行展示。

请注意，`slot-scope` 在 Vue 2.6.0 版本后已被废弃，推荐使用新的语法糖 `<template v-slot:default="props">` 来替代。因此，上述示例代码也可以修改为：

<!-- 父组件 -->
<template>
  <div>
    <child-component>
      <template #default="props">
        <span>{{ props.slotContent }}</span>
      </template>
    </child-component>
  </div>
</template>

这样就能够在父组件中访问子组件的插槽内容，并将其包裹在 `<span>` 元素中进行展示。