插槽

使用slot声明一个插槽出口API后，选择将组件内容渲染到插槽部分，也可以选择不做渲染。

父组件

<template>
  <slot1>
    <template v-slot:header></template>

    <!-- 中间内容 作用域插槽-->
    <template v-slot:content="scoped">
      {{scoped.demo}}
    </template>

    <template v-slot:footer></template>
  </slot1>
</template>

<script>
  import slot1 from '@/components/vue3/demo/slot1.vue'

  export default {
    components:{
      slot1
    }
  }
</script>

子组件

<template>
  <h1>插槽子组件</h1>

  <slot name="header">
    <h1>头部部分</h1>
  </slot>

  <slot name="content" :demo="demo"></slot>

  <slot name="footer">
    <b>底部部分</b>
  </slot>
</template>

<script>
  import { ref } from 'vue'
  export default{
    setup()
    {
      let demo = ref('hello world')
      return {
        demo
      }
    }
  }
</script>