vue3具名插槽&动态插槽

// 动态插槽
// 应用页面
<template>
  <div>
    <child v-slot="{nn,aa,ss}">
      <div>{{nn}}</div>
      <div>{{aa}}</div>
      <div>{{ss}}</div>
    </child>
  </div>
</template>

<script setup lang="ts">
import {defineAsyncComponent} from "vue";
const child=defineAsyncComponent(()=>import('./child.vue'))
</script>

<style scoped lang="less"></style>
// 插槽
<template>
  <div>
    <hr>
    <p>我是路飞</p>
    <slot :nn="name" :aa="age" :ss="skill">占位</slot>
    <p>我是索隆</p>
    <p>我是山治</p>
    <p>我是乔巴</p>
    <p>我是乌索普</p>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
const name=ref<string>('我是要成为海贼王的男人')
const age=ref<number>(19)
const skill=ref<string>('one piece')
</script>

<style scoped lang="less"></style>

// 具名插槽
// 应用页面
<template>
  <div>
    <child>
      <template #siHuang>
        <div>黑胡子</div>
      </template>
      <template #haiJun>
        <div>战国</div>
      </template>
    </child>
  </div>
</template>

<script setup lang="ts">
import {defineAsyncComponent} from "vue";
const child=defineAsyncComponent(()=>import('./child.vue'))
</script>

<style scoped lang="less"></style>

// 插槽
<template>
  <div>
    <p>白胡子</p>
    <slot name="siHuang"></slot>
    <p>红发</p>
    <p>凯多</p>
    <slot name="haiJun"></slot>
    <p>大妈</p>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="less"></style>