属性

slot

在 Vue 2 中，template 元素中的 scope 属性已经被弃用。
在 Vue 2.x 中，用于创建“作用域插槽”（scoped slots）的方法是使用 v-slot 指令，而不是 template 元素的 scope 属性。

注：
在 Vue 2.x 中，v-slot 指令用于在父组件中定义作用域插槽，并允许子组件访问父组件传递的数据。这种方式比旧版的 template 元素的 scope 更直观和易懂。

<!-- 父组件 ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <!-- 子组件内使用父组件传递的数据 -->
      <p>{{ slotProps.data }}</p>
    </template>
  </ChildComponent>
</template>

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <slot :data="childData"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childData: 'Hello from Child'
    };
  }
};
</script>

在上面的例子中，v-slot:default="slotProps" 中的 slotProps 是父组件中的作用域插槽，用于接收子组件传递的数据。这种方式是 Vue 2.x 中常用的作用域插槽的写法。

总结来说，Vue 2.x 中使用 v-slot 指令来创建作用域插槽，而 template 元素中的 scope 属性已经被弃用。

slot-scope

在 Vue 2.x 中，<template> 元素与 slot-scope 属性通常结合使用，用于在父组件中自定义插槽内容，并在子组件中使用作用域插槽（scoped slots）。

当父组件需要向子组件传递数据，并希望子组件能够在插槽中使用这些数据，可以通过作用域插槽实现。slot-scope 允许你在父组件的插槽中传递数据到子组件，并且在子组件中使用这些数据。

示例：

父组件 ParentComponent.vue 传递了一些数据到子组件 ChildComponent.vue：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <template slot-scope="props">
      <span>{{ props.message }}</span>
      <button @click="props.handleClick">Click Me</button>
    </template>
  </ChildComponent>
</template>

在这个例子中，slot-scope="props" 表示在父组件的插槽中创建了一个作用域，可以通过 props 来访问子组件中传递的数据和方法。

然后，在子组件 ChildComponent.vue 中接收并使用这些数据：

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :message="message" :handleClick="handleClick"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Child',
    },
    methods: {
      handleClick() {
        console.log('Button clicked');
      }
    }
  }
};
</script>

在子组件中，<slot> 标签内部将数据和方法通过属性传递给父组件的插槽。在父组件中，通过 slot-scope 可以访问子组件传递的数据和方法。

这种模式允许父组件在插槽内使用子组件中的数据和方法，使得父组件能够自定义子组件的部分逻辑。这在需要更灵活的插槽内容和数据交互时非常有用。需要注意，Vue 3 中已经改用 <template v-slot> 语法替代了 Vue 2.x 中的 <template> 与 slot-scope。