组件通信-作用域插槽
组件通信-作用域插槽
这是插槽最强大的地方。有时候，父组件提供的插槽内容需要依赖于子组件内部的数据（例如列表组件需要让父组件自定义每一项如何渲染）。
实现原理：子组件在渲染<slot>时，通过属性的形式将数据绑定到标签上，父组件通过v-slot接收这些属性。
实例展示
例如我们现在有两个组件，一个组件是Menu.vue,这个组件负责管理菜单数据，但是这个组件不决定每个菜品如何展示
<template> <div class="menu"> <h3>今日菜单</h3> </div> </template> <script setup lang="ts" name="menu"> import { ref } from 'vue' // 模拟菜单数据 const menuItems = ref([ { id: 1, name: '宫保鸡丁', price: 48, spicy: true, vegan: false }, { id: 2, name: '麻婆豆腐', price: 28, spicy: true, vegan: true }, { id: 3, name: '清炒时蔬', price: 22, spicy: false, vegan: true }, { id: 4, name: '水煮鱼', price: 88, spicy: true, vegan: false } ])</script> <style scoped></style>- 还有一个父组件
<template> <Menu /> </template> <script setup lang="ts"> import Menu from './Menu.vue'; </script> <style scoped></style>- 然后我们需要将这些菜单数据传给父组件，然后让父组件去决定这个数据如何进行展示
<template> <div class="menu"> <h3>今日菜单</h3> <ul> <li v-for="(item, idx) in menuItems" :key="item.id"> <slot name="dish" :dish="item" :index="idx"></slot> </li> </ul> </div> </template>:index="idx"是将当前循环的索引值idx通过作用域插槽暴露给父组件，让父组件在自定义每个菜品展示时能够使用这个索引。例如在普通顾客视图中，父组件通过{{ index + 1 }}显示菜品的序号（从 1 开始）。这样父组件就拥有了子组件内部循环的索引信息，增强了渲染的灵活性。
- 既然子组件给我们传了，那我们就收就完事了
<Menu> <template #dish="{ dish, index }"> <div class="customer-view"> <span class="index">{{ index + 1 }}.</span> <strong>{{ dish.name }}</strong> <span class="price">¥{{ dish.price }}</span> <span v-if="dish.spicy" class="spicy">🌶️ 辣</span> </div> </template> </Menu>解析：首先我们要将数据解构出来，解构出来菜单数组和序号；然后进行关联就可以了
- 这并不是证明父组件可以绝对这些数据的展示，例如我们有三种用户，一个是顾客，一个是厨师，一个是促销视图
<Menu> <template #dish="{ dish, index }"> <div class="customer-view"> <span class="index">{{ index + 1 }}.</span> <strong>{{ dish.name }}</strong> <span class="price">¥{{ dish.price }}</span> <span v-if="dish.spicy" class="spicy">🌶️ 辣</span> </div> </template> </Menu> <hr /> <!-- 员工视图（后厨）：只显示菜名和特殊要求（如辣、素） --> <Menu> <template #dish="{ dish }"> <div class="kitchen-view"> <span>{{ dish.name }}</span> <span v-if="dish.spicy" class="badge">🔥 辣</span> <span v-if="dish.vegan" class="badge">🥬 素食</span> </div> </template> </Menu> <hr /> <!-- 促销视图：特价菜品（价格打五折） --> <Menu> <template #dish="{ dish }"> <div class="promo-view"> <span>{{ dish.name }}</span> <span class="old-price">¥{{ dish.price }}</span> <span class="new-price">¥{{ (dish.price * 0.5).toFixed(0) }}</span> <span class="tag">限时五折</span> </div> </template> </Menu> </div> </template>- 可以加一点点的样式
.customer-view { padding: 8px; border-bottom: 1px solid #eee; } .index { margin-right: 8px; color: #666; } .price { margin-left: 12px; color: #e67e22; font-weight: bold; } .spicy { margin-left: 8px; color: red; font-size: 0.8em; } .kitchen-view { background: #f9f9f9; padding: 8px; margin-bottom: 4px; border-radius: 4px; } .badge { margin-left: 8px; background: #ffebcc; padding: 2px 6px; border-radius: 12px; font-size: 0.7em; } .promo-view { padding: 8px; background: #fff3e0; margin-bottom: 4px; border-radius: 4px; } .old-price { text-decoration: line-through; margin-left: 12px; color: #999; font-size: 0.9em; } .new-price { margin-left: 8px; color: #d35400; font-weight: bold; font-size: 1.1em; } .tag { margin-left: 12px; background: #e67e22; color: white; padding: 2px 6px; border-radius: 12px; font-size: 0.7em; }