vue3中组件间通信之插槽（slot）

一、插槽（slot）：组件中的模板会覆盖组件中的原始内容（即自定义标签对内部的内容会不显示），使用插槽可以使自定义标签内容显示；

插槽作用：父组件提供内容，子组件中展示

二、插槽结构：

1.匿名插槽（单个插槽，无name属性）：父组件传递到子组件的内容会覆盖掉子组件插槽中默认的内容

父组件：

<template>
    <div>
        <h2>小d页面视图</h2>
        <h2>我是父亲</h2>
        <ddSon>
            默认插槽显示的内容
        </ddSon>
    </div>
</template>

<script setup>
import ddSon from "../components/ddSon.vue"
</script>

子组件：

<template>
<div style="background-color: #fff;">
    <h3>我是孩子</h3>
    <!-- 1.默认插槽： -->
    <slot>默认插槽内容</slot>
</div>

</template>

<script setup>
</script>

效果&