Vue 之组件插槽Slot用法（组件间通信一种方式）

1)插槽由来和分类

在某些场景中，我们可能想要在父组件为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。

这就是插槽的作用。插槽分多种，默认插槽、具名插槽、条件插槽、动态插槽、作用域插槽。

2）插槽类型和举栗子

1.默认插槽

<slot></slot>

举栗子：

父组件：子组件的插槽写在哪里，父组件传递的内容就在哪里展示

<template><div>我是父组件</div><son>我是父组件给子组件的插槽</son>
</template><script setup>
import son from './son.vue'
</script>

子组件：

<template><h3>我是子组件</h3><br><slot></slot>
</template>

 

2.具名插槽，一个子组件可以存在多个

<slot name="header"></slot>
<slot name="footer"></slot>

父组件：父组件使用具名插槽有2种写法

<template><div>我是父组件</div><son>我是父组件给子组件的插槽<!-- 具名插槽写法1 --><!-- <template v-slot:header>header插槽</template> --><!-- 具名插槽写法2 --><template #header>header插槽</template></son>
</template>

子组件：

<template><h3>我是子组件</h3><br><slot></slot><br><slot name="header"></slot>
</template>

 

3.条件插槽，主要是为了给插槽提供额外的样式

  <div v-if="slots.header" class="trans-header"><slot name="header"></slot></div><div v-if="slots.footer" class="trans-footer"><slot name="footer"></slot></div>

举栗子：

父组件：

<template><div>我是父组件</div><son><template #header>header插槽</template><template #footer>footer插槽</template></son>
</template><script setup>
import son from './son.vue'
</script>

 子组件:

<template><h3>我是子组件</h3><br><slot></slot><br><div v-if="slots.header" class="trans-header"><slot name="header"></slot></div><div v-if="slots.footer" class="trans-footer"><slot name="footer"></slot></div>
</template><script setup>
import { onMounted, useSlots } from "vue";
const slots = useSlots()
onMounted(() => {// 可以通过slots判断传递了哪些插槽console.log(slots);
})</script>

4.动态插槽，动态传入插槽名

<son><!-- 该属性dynamicSlotName为动态数据，在js定义并传递 --><template v-slot:[dynamicSlotName]>...</template><!-- 缩写为 --><template #[dynamicSlotName]>...</template>
</son>

5.作用域插槽

父组件：父组件传递给子组件的数据，可以通过插槽再次传递给父组件使用，封装组件时非常常用

<template><div>我是父组件</div><son :obj1="obj1" :obj2="obj2">我是父组件给子组件的插槽<template #header="slot">header插槽{{ slot.obj1 }}</template><template #footer="slot">footer插槽{{ slot.obj2 }}</template></son>
</template><script setup>
import { reactive } from 'vue';
import son from './son.vue'
const obj1 = reactive({ name: '羊羊', age: 12 });
const obj2 = reactive({ name: '猫猫', age: 2 });
</script>

子组件：

<template><h3>我是子组件</h3><br><slot></slot><br><slot name="header" :obj1="obj1"></slot><slot name="footer" :obj2="obj2"></slot>
</template><script setup>
const props = defineProps({obj1: {type: Object, default: () => { }},obj2: {type: Object, default: () => { }},
})
</script>

如有不足，欢迎指正。

不要忽视你达成的每个小练习，它是你前进路上的垫脚石。冲！