vue3 （三）插槽slot用法

### Vue 3 Slot 插槽传值的方法 在 Vue 3 中，插槽（Slot）提供了一种强大的方式来组合组件的内容。为了实现更灵活的设计模式，Vue 提供了具名插槽和作用域插槽两种机制用于传递数据。 #### 使用具名插槽传递静态内容 当需要向特定位置插入内容时，可以使用具名插槽。这允许父组件决定子组件内部某些部分的具体呈现形式而不改变其结构逻辑[^1]。 ```html <!-- ParentComponent.vue --> <ChildComponent> <!-- 默认插槽 --> <template v-slot:default>这是默认插槽</template> <!-- 具名插槽 --> <template v-slot:header>这里是头部区域</template> <template v-slot:footer>这里是底部区域</template> </ChildComponent> ``` 对于上述代码片段，在 `ChildComponent` 组件内定义好了接收这些模板的位置之后，就可以按照预期显示来自父级的不同部分内容[^2]。 #### 利用作用域插槽传递动态数据 如果希望不仅仅是简单地填充 HTML 片段，而是想要共享一些状态或属性给到子组件，则需要用到带有作用域的作用域插槽。这种方式可以让子组件将其自身的私有数据暴露出来作为上下文的一部分传递回父组件，从而让后者能够访问并利用这部分信息构建更加复杂的交互体验。 ```html <!-- ChildComponent.vue --> <template> <div class="container"> <slot :user="user"></slot> </div> </template> <script setup lang="ts"> import { ref } from &#39;vue&#39;; const user = ref({ name: &#39;张三&#39;, age: 28 }); </script> ``` 接着可以在父组件里像这样获取并展示这个对象： ```html <!-- ParentComponent.vue --> <ChildComponent v-slot="{ user }"> {{ user.name }} ({{ user.age }}) </ChildComponent> ``` 这段代码展示了如何通过解构赋值的方式轻松取得由子组件提供的变量，并直接嵌入至最终渲染的结果之中。 #### 完整示例：带参数的具名插槽 下面给出一个完整的例子说明怎样在一个实际项目里面运用所学的知识点完成具体功能开发——比如创建一个可配置按钮组控件，其中每个按钮都可以自定义样式及行为。 ```html <!-- ButtonGroup.vue --> <template> <ul> <li v-for="(item, index) in items" :key="index"> <button @click="$emit(&#39;select&#39;, item)"> <slot :name="&#39;btn-&#39; + index" :text="item.text">{{ item.defaultText }}</slot> </button> </li> </ul> </template> <script setup lang="ts"> defineProps({ items: { type: Array, required: true } }); </script> ``` 然后在调用的地方可以根据需求定制每一个按钮的样子: ```html <ButtonGroup :items="[...]" @select="handleSelect"> <template v-slot:btn-0="{ text }">首页 - {{ text }}</template> <template v-slot:btn-1="{ text }"><strong>{{ text }}</strong></template> ... </ButtonGroup> ``` 这里不仅实现了对单个元素外观上的差异化处理，同时也保持了良好的模块化设计原则。