vue3 作用域插槽父子封装

Vue 3 的作用域插槽在父子组件之间的传值方式和 Vue 2 是一样的。父组件通过 `v-slot` 或 `slot` 指令来定义作用域插槽，子组件通过 `props` 接收作用域插槽中传递的数据。

下面是一个父组件和子组件分别实现作用域插槽的示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component>
      <template v-slot:default="slotProps">
        <p>{{ slotProps.data }}</p>
      </template>
    </child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
};
</script>

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

<script>
export default {
  name: 'ChildComponent',
  props: ['childData'],
};
</script>

在这个示例中，父组件通过 `v-slot:default="slotProps"` 定义了一个名为 `default` 的作用域插槽，并且将插槽中传递的数据绑定到了 `slotProps` 变量上。子组件中通过 `slot` 标签和 `props` 接收了从父组件传递的数据。

可以看到，父组件和子组件都需要定义一个名为 `data` 的属性来传递数据，这里我们将这个属性分别命名为 `slotProps` 和 `childData`，这是因为在实际开发中这个属性名可能会因为业务需求不同而有所变化。

如果你想封装一个具有作用域插槽的组件，可以在组件的模板中使用 `slot` 标签来定义插槽，并且在组件的 `props` 中定义接收插槽数据的属性。具体实现方法可以参照上面的示例。