基础语法
在 Vue 2 中，插槽（Slot）是一种用于在组件中进行内容分发的机制。它允许你在父组件中编写子组件的部分内容，以便在子组件中动态地插入不同的内容。
使用插槽的好处之一是提高了组件的可复用性和灵活性。父组件可以根据需要自定义子组件的部分内容，而无需修改子组件本身。
Vue 2 中的插槽有两种类型：具名插槽和默认插槽。
具名插槽（Named Slots）：
具名插槽允许你在子组件中通过特定名称来插入内容。
在父组件中，你可以使用<template>标签的 slot 属性，并指定一个名称。例如，<slot name="header"></slot> 表示一个具名插槽，名称为 "header"。
在子组件中，你可以使用 <template> 标签的 slot 元素，来占位插入父组件传递的具名插槽内容。例如，<slot name="header"></slot>。
默认插槽（Default Slot）：
默认插槽允许你在子组件中插入未命名的内容。如果父组件在使用子组件时不提供具名插槽的内容，那么将使用默认插槽来显示内容。
在子组件中，你可以使用 来定义默认插槽。
如何使用具名插槽和默认插槽：
父组件 ParentComponent.vue：
<template>
<div>
<h2>父组件</h2>
<ChildComponent>
<template v-slot:header>
<h3>这是插入到具名插槽 header 的内容</h3>
</template>
<p>这是默认插槽的内容</p>
</ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
};
</script>
子组件 ChildComponent.vue：
<template>
<div>
<h3>子组件</h3>
<slot name="header"></slot>
<slot></slot>
</div>
</template>
<script>
export default {
};
</script>
在上面的示例中，父组件使用子组件<ChildComponent>并在其中传递了具名插槽和默认插槽的内容。
子组件中的<slot name="header"></slot> 表示具名插槽 "header"，它将显示父组件中通过<template v-slot:header>插入的内容。
而<slot></slot>表示默认插槽，它将显示父组件中没有被具名插槽占用的内容。
通过使用插槽，你可以在父组件中动态地插入子组件的部分内容，从而实现更灵活的组件复用和定制。
我的理解
在普通情况下，当父组件引用子组件时，子组件的标签内是不能包含其他内容的。但是通过使用插槽，父组件可以在子组件标签内写入内容，从而对子组件进行定制和扩展。
无论是具名插槽还是默认插槽，它们都是一种在父组件中对子组件进行修饰的机制。
具名插槽允许你在父组件中根据名称插入特定的内容。通过在子组件中定义具名插槽，并在父组件中使用<template v-slot:slotName>来填充内容，实现了父组件对子组件的定制。
默认插槽则是一个备用的插槽，当父组件没有为具名插槽提供内容时，将使用默认插槽来展示内容。这样，父组件可以在子组件标签内直接写入内容，作为默认插槽的内容。
使用插槽可以让父组件更加灵活地控制和定制子组件的部分内容，提高了组件的可复用性和扩展性。
实战
在 Vue 2 中使用插槽来创建一个可复用的模态框组件。
Modal.vue 组件：
<template>
<div class="modal" v-if="show">
<div class="modal-content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false
}
}
};
</script>
<style>
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
background-color: #fff;
padding: 20px;
}
</style>
在上述代码中，Modal.vue 是一个简单的模态框组件。它根据 show 属性来控制是否显示模态框。
模态框的内容是通过插槽 进行分发的。父组件在使用 组件时，可以在 标签内放置任意内容，作为模态框的内容。
现在，我们可以在父组件中使用 Modal 组件，并在其中定义模态框的内容。
App.vue 父组件：
<template>
<div>
<h2>父组件</h2>
<button @click="showModal = true">打开模态框</button>
<Modal :show="showModal">
<h3>这是一个模态框标题</h3>
<p>这是模态框的具体内容</p>
<button @click="showModal = false">关闭模态框</button>
</Modal>
</div>
</template>
<script>
import Modal from './Modal.vue';
export default {
components: {
Modal
},
data() {
return {
showModal: false
};
}
};
</script>
在 App.vue 父组件中，我们引入了 Modal.vue 组件，并在 <Modal> 标签内放置了模态框的内容，包括标题和具体内容。通过 showModal 属性来控制模态框的显示或隐藏。
当点击 "打开模态框" 按钮时，showModal 状态会变为 true，从而显示模态框。模态框内的按钮点击事件可以修改 showModal 状态为 false，实现关闭模态框。
通过使用插槽，我们实现了一个可复用的模态框组件，父组件可以根据需要定制模态框的内容。
谢谢款待
