slot全家桶

<template>

<SlotComponent>

  <!-- <template v-slot>123</template> -->

  <template #default>不同写法</template>

  <!-- <template v-slot:middle>456</template> -->

  <!-- <template #middle>不同写法</template> -->

  <template #[name]>动态插槽</template>

  <!-- 作用域插槽,在子组件传值到父组件 -->

  <!-- <template v-slot:buttom="{data}">789{{ data.name }}</template> -->

   <template #buttom="{data}">789{{ data.name }}</template>

</SlotComponent>

</template>

<script setup lang='ts'>

const name = 'middle'

import SlotComponent from '../study/slot/component.vue'

</script>

<style scoped lang='scss'>

</style>

 

<template>

<div style="color: red;">

  <slot></slot>

</div>

<div style="color: blue;">

  <slot name="middle"></slot>

</div>

<div style="color: green;">

  <slot name="buttom" :data="state"></slot>

</div>

</template>

<script setup lang='ts'>

import { reactive } from 'vue'

const state = reactive({

  name: '123'

})

</script>

<style scoped lang='scss'>

</style>