前言
Vue 的 slot 是一项强大的特性，用于组件化开发中。它允许父组件向子组件传递内容，使得组件更加灵活和可复用。通过 slot，可以将不同的内容嵌入到同一个组件中，而不需要在组件内部硬编码这些内容。这种灵活性使得组件可以根据需要显示不同的内容，同时保持结构的一致性。
插槽的基本概念
基础用法
Vue 的插槽使用一对特殊的 HTML 元素，被称为插槽。在父组件中使用组件时，可以在组件的标签之间插入任何内容，这些内容会被传递到子组件中的插槽处。
<!-- ParentComponent.vue --> <template> <div> <ChildComponent> <p>Hello from parent!</p> </ChildComponent> </div> </template> <!-- ChildComponent.vue --> <template> <div> <slot></slot> </div> </template>
在这个例子中，ChildComponent 是子组件，它包含一个默认的插槽（即 slot 元素），父组件 ParentComponent 中的内容（<p>Hello from parent!</p>）会被传递到 slot 中，最终显示在页面上。
具名插槽
除了默认插槽外，Vue 还支持具名插槽。这使得可以在一个组件中定义多个插槽，每个插槽有自己的名称，并且允许父组件将内容传递到特定的插槽中。
<!-- ChildComponent.vue --> <template> <div> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> </template>
父组件中使用具名插槽：
<!-- ParentComponent.vue --> <template> <div> <ChildComponent> <template v-slot:header> <h1>This is the header</h1> </template> <p>Hello from main content!</p> <template v-slot:footer> <footer>Footer content</footer> </template> </ChildComponent> </div> </template>
使用场景
布局控制
插槽使得构建可复用的布局组件变得更容易。父组件可以控制子组件的布局，传递不同的内容到不同的插槽中，以适应各种布局需求。
嵌套组件
通过插槽，可以在一个组件中嵌套多个子组件，并将内容传递到子组件的插槽中。这种嵌套可以大大提高组件的复用性。
组件的灵活性
使用插槽可以使组件更具灵活性，可以根据需要显示不同的内容。例如，在按钮组件中，可以将按钮的内容作为插槽，让父组件决定按钮显示的具体内容。
高级用法
作用域插槽
作用域插槽允许父组件向子组件传递数据。这种方式使得子组件可以对传递的数据进行处理，然后在插槽中渲染。
<!-- ParentComponent.vue --> <template> <div> <ChildComponent> <template v-slot:default="slotProps"> <p>{{ slotProps.message }}</p> </template> </ChildComponent> </div> </template>
<!-- ChildComponent.vue --> <template> <div> <slot :message="message"></slot> </div> </template> <script> export default { data() { return { message: 'Hello from child!' }; } } </script>
ChildComponent 将 message 作为作用域插槽的参数传递给父组件。
总结
Vue 的插槽是一项强大的功能，它使得组件化开发更为灵活和可复用。无论是简单的默认插槽还是复杂的作用域插槽，都为开发者提供了更多控制组件内容和布局的方式。插槽的灵活性和可扩展性，使得Vue应用更容易构建、维护和扩展。
