vue 中 作用域插槽的使用

在 Vue 中，作用域插槽是一种特殊的插槽，它可以让父组件向子组件传递数据，并且让子组件根据这些数据来渲染内容。作用域插槽的使用方法如下：

1. 在父组件中定义插槽，并且使用 `v-bind` 指令将数据传递给子组件：

<template>
  <child-component>
    <template v-slot:default="slotProps">
      {{ slotProps.message }}
    </template>
  </child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello, World!',
    };
  },
};
</script>

2. 在子组件中使用 `slot-scope` 属性来接收父组件传递的数据，并且根据这些数据来渲染内容：

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Default Message',
    };
  },
};
</script>

在上面的例子中，父组件向子组件传递了一个名为 `message` 的数据，子组件通过 `slot-scope` 属性接收这个数据，并且将它渲染到模板中。