vue3+setup插槽（普通插槽，具名插槽，作用域插槽），超级简单的例子，看了就会用

下面的代码中包含了普通插槽，具名插槽，作用域插槽在vue3+setup中的使用，清晰明了，看了就会用，也不废话了，直接给各位上代码

子组件

<template>
  <div>
    <slot name="header"></slot>
    这是一个子组件
    <slot name="footer"></slot>

    <div style="color: red; margin-top: 10px;">下面的是普通插槽</div>
    <slot></slot>

    <div style="color: blue;margin-top: 30px;">下面的是作用域插槽</div>
    <slot name="scope" :msgs="obj"></slot>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const obj = ref({
  name: 'jack',
  age: 18,
  sex: '男'
})
</script>

父组件

<script setup>
import SoltPage from './views/SoltPage.vue'
const msg = '作用域插槽'
</script>

<template>
  <SoltPage>
    <template #header>
      <div>这是插槽头部内容</div>
    </template>

    <template #footer>
      <div>这是插槽脚步内容</div>
    </template>

    <template #default>
      <div>这是啥也没有的插槽内容</div>
    </template>

    <template #scope="{ msgs }">
      <h2>{{ msg }}</h2>
      <div>{{ msgs.name }}</div>
      <div>{{ msgs.age }}</div>
      <div>{{ msgs.sex }}</div>
    </template>
  </SoltPage>
</template>

这一套下来就会展示这些东西

这里面把三种常见插槽的用法都展示出来了，也欢迎各位对此做出补充，作者如果觉得有用加鸡腿，哈哈