qidao123.com技术社区-IT企服评测·应用市场

标题: Vue3 组件通讯与插槽 [打印本页]
作者: 圆咕噜咕噜    时间: 2025-4-28 07:59
标题: Vue3 组件通讯与插槽
Vue3 组件通讯方式全解（10种方案）

一、组件通讯方式概览

通讯方式适用场景数据流向复杂度Props/自界说事件父子组件简朴通讯父 ↔ 子⭐v-model 双向绑定父子表单组件父 ↔ 子⭐⭐Provide/Inject跨层级组件通讯祖先 → 子女⭐⭐事件总线恣意组件间通讯恣意方向⭐⭐⭐模板引用（ref）父操作子组件父 → 子⭐Pinia 状态管理复杂应用状态共享全局共享⭐⭐⭐欣赏器存储持久化数据共享全局共享⭐⭐⭐attrs/attrs/listeners透传属性/事件父 → 深层子组件⭐⭐作用域插槽子向父通报渲染内容子 → 父⭐⭐路由参数页面间数据通报页面间⭐
二、焦点通讯方案详解

1. Props / 自界说事件（父子通讯）

  1. <!-- 父组件 Parent.vue -->
  2. <template>
  3.   <Child
  4.     :message="parentMsg"
  5.     @update="handleUpdate"
  6.   />
  7. </template>
  9. <script setup>
  10. import { ref } from 'vue'
  11. const parentMsg = ref('Hello from parent')
  13. const handleUpdate = (newMsg) => {
  14.   parentMsg.value = newMsg
  15. }
  16. </script>
  18. <!-- 子组件 Child.vue -->
  19. <script setup>
  20. defineProps(['message'])
  21. const emit = defineEmits(['update'])
  23. const sendToParent = () => {
  24.   emit('update', 'New message from child')
  25. }
  26. </script>
复制代码
2. v-model 双向绑定（表单场景）

  1. <!-- 父组件 -->
  2. <CustomInput v-model="username" />
  4. <!-- 子组件 CustomInput.vue -->
  5. <template>
  6.   <input
  7.     :value="modelValue"
  8.     @input="$emit('update:modelValue', $event.target.value)"
  9.   >
  10. </template>
  12. <script setup>
  13. defineProps(['modelValue'])
  14. defineEmits(['update:modelValue'])
  15. </script>
复制代码
3. Provide/Inject（跨层级）

  1. // 祖先组件
  2. import { provide, ref } from 'vue'
  3. const theme = ref('dark')
  5. provide('theme', {
  6.   theme,
  7.   toggleTheme: () => {
  8.     theme.value = theme.value === 'dark' ? 'light' : 'dark'
  9.   }
  10. })
  12. // 后代组件
  13. import { inject } from 'vue'
  14. const { theme, toggleTheme } = inject('theme')
复制代码
4. 事件总线 mitt（恣意组件）

  1. // eventBus.js
  2. import mitt from 'mitt'
  3. export const emitter = mitt()
  5. // 组件A（发送）
  6. emitter.emit('global-event', { data: 123 })
  8. // 组件B（接收）
  9. emitter.on('global-event', (data) => {
  10.   console.log(data)
  11. })
复制代码
5. Pinia 状态管理（复杂应用）

  1. // stores/user.js
  2. export const useUserStore = defineStore('user', {
  3.   state: () => ({ name: 'Alice' }),
  4.   actions: {
  5.     updateName(newName) {
  6.       this.name = newName
  7.     }
  8.   }
  9. })
  11. // 组件使用
  12. const userStore = useUserStore()
  13. userStore.updateName('Bob')
复制代码
6. 作用域插槽（子传父）

  1. <!-- 子组件 -->
  2. <template>
  3.   <slot :data="childData" />
  4. </template>
  6. <script setup>
  7. const childData = { message: 'From child' }
  8. </script>
  10. <!-- 父组件 -->
  11. <Child>
  12.   <template #default="{ data }">
  13.     {{ data.message }}
  14.   </template>
  15. </Child>
复制代码
三、进阶通讯本领

1. 多层属性透传

  1. // 父组件
  2. <GrandParent>
  3.   <Parent>
  4.     <Child />
  5.   </Parent>
  6. </GrandParent>
  8. // GrandParent.vue
  9. <template>
  10.   <Parent v-bind="$attrs">
  11.     <slot />
  12.   </Parent>
  13. </template>
  15. // 使用 inheritAttrs: false 关闭自动继承
复制代码
2. 动态组件通讯

  1. <component
  2.   :is="currentComponent"
  3.   @custom-event="handleEvent"
  4. />
复制代码
3. 自界说 Hook 封装

  1. // hooks/useCounter.js
  2. export function useCounter(initial = 0) {
  3.   const count = ref(initial)
  4.   
  5.   const increment = () => count.value++
  6.   
  7.   return { count, increment }
  8. }
  10. // 组件A
  11. const { count: countA } = useCounter()
  13. // 组件B
  14. const { count: countB } = useCounter(10)
复制代码
4. 全局事件总线加强版

  1. // eventBus.ts
  2. type EventMap = {
  3.   'user-login': { userId: string }
  4.   'cart-update': CartItem[]
  5. }
  7. export const emitter = mitt<EventMap>()
  9. // 安全使用
  10. emitter.emit('user-login', { userId: '123' })
复制代码
四、最佳实践指南

  1. // Props 类型定义
  2. defineProps<{
  3.   title: string
  4.   data: number[]
  5. }>()
  7. // 事件类型定义
  8. defineEmits<{
  9.   (e: 'update', value: string): void
  10.   (e: 'delete', id: number): void
  11. }>()
复制代码
五、常见题目解决方案

Q1: 如何避免 Props 层层通报？
✅ 使用 Provide/Inject 或 Pinia
Q2: 子组件如何修改父组件数据？
✅ 通过自界说事件关照父组件修改
Q3: 如何实现兄弟组件通讯？
✅ 方案1：通过共同的父组件中转
✅ 方案2：使用事件总线或 Pinia
Q4: 如何包管响应式数据安全？
✅ 使用 readonly 限定修改权限：
  1. provide('config', readonly(config))
复制代码
Q5: 如何实现跨路由组件通讯？
✅ 使用 Pinia 状态管理
✅ 通过路由参数通报
✅ 使用 localStorage 持久化存储
   
插槽详解

一、插槽焦点概念

1. 插槽作用

答应父组件向子组件插入自界说内容，实现组件的高度可定制化
2. 组件通讯对比

通讯方式数据流向内容类型Props父 → 子纯数据插槽父 → 子模板/组件/HTML片断
二、基础插槽类型

1. 默认插槽

子组件：
  1. <!-- ChildComponent.vue -->
  2. <template>
  3.   <div class="card">
  4.     <slot>默认内容（父组件未提供时显示）</slot>
  5.   </div>
  6. </template>
复制代码
父组件：
  1. <ChildComponent>
  2.   <p>自定义卡片内容</p>
  3. </ChildComponent>
复制代码
2. 具名插槽

子组件：
  1. <template>
  2.   <div class="layout">
  3.     <header>
  4.       <slot name="header"></slot>
  5.     </header>
  6.     <main>
  7.       <slot></slot> <!-- 默认插槽 -->
  8.     </main>
  9.     <footer>
  10.       <slot name="footer"></slot>
  11.     </footer>
  12.   </div>
  13. </template>
复制代码
父组件：
  1. <ChildComponent>
  2.   <template #header>
  3.     <h1>页面标题</h1>
  4.   </template>
  6.   <p>主内容区域</p>
  8.   <template v-slot:footer>
  9.     <p>版权信息 © 2023</p>
  10.   </template>
  11. </ChildComponent>
复制代码
三、作用域插槽（焦点进阶）

1. 数据通报原理

子组件向插槽通报数据 → 父组件吸收使用
子组件：
  1. <template>
  2.   <ul>
  3.     <li v-for="item in items" :key="item.id">
  4.       <slot :item="item" :index="index"></slot>
  5.     </li>
  6.   </ul>
  7. </template>
  9. <script setup>
  10. const items = ref([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }])
  11. </script>
复制代码
父组件：
  1. <ChildComponent>
  2.   <template #default="{ item, index }">
  3.     <span>{{ index + 1 }}. {{ item.name }}</span>
  4.     <button @click="deleteItem(item.id)">删除</button>
  5.   </template>
  6. </ChildComponent>
复制代码
2. 应用场景示例

场景：表格组件支持自界说列渲染
子组件：
  1. <template>
  2.   <table>
  3.     <thead>
  4.       <tr>
  5.         <th v-for="col in columns" :key="col.key">
  6.           {{ col.title }}
  7.         </th>
  8.       </tr>
  9.     </thead>
  10.     <tbody>
  11.       <tr v-for="row in data" :key="row.id">
  12.         <td v-for="col in columns" :key="col.key">
  13.           <slot :name="col.key" :row="row">
  14.             {{ row[col.key] }} <!-- 默认显示 -->
  15.           </slot>
  16.         </td>
  17.       </tr>
  18.     </tbody>
  19.   </table>
  20. </template>
复制代码
父组件：
  1. <DataTable :data="users" :columns="columns">
  2.   <template #action="{ row }">
  3.     <button @click="editUser(row.id)">编辑</button>
  4.     <button @click="deleteUser(row.id)">删除</button>
  5.   </template>
  7.   <template #status="{ row }">
  8.     <span :class="row.status">{{ row.status | statusText }}</span>
  9.   </template>
  10. </DataTable>
复制代码
四、动态插槽名

子组件：
  1. <template>
  2.   <div class="dynamic-slot">
  3.     <slot :name="slotName"></slot>
  4.   </div>
  5. </template>
  7. <script setup>
  8. defineProps({
  9.   slotName: {
  10.     type: String,
  11.     default: 'default'
  12.   }
  13. })
  14. </script>
复制代码
父组件：
  1. <ChildComponent :slotName="currentSlot">
  2.   <template #[currentSlot]>
  3.     <p>动态插槽内容（当前使用 {{ currentSlot }} 插槽）</p>
  4.   </template>
  5. </ChildComponent>
复制代码
五、高级本领

1. 插槽继续（$slots）

访问子组件插槽内容：
  1. // 子组件内部
  2. const slots = useSlots()
  3. console.log(slots.header()) // 获取具名插槽内容
复制代码
2. 渲染函数中使用插槽

  1. // 使用 h() 函数创建元素
  2. export default {
  3.   render() {
  4.     return h('div', [
  5.       this.$slots.default?.() || '默认内容',
  6.       h('div', { class: 'footer' }, this.$slots.footer?.())
  7.     ])
  8.   }
  9. }
复制代码
六、最佳实践指南

七、常见题目解答

Q1：如何强制要求必须提供某个插槽
  1. // 子组件中验证
  2. export default {
  3.   mounted() {
  4.     if (!this.$slots.header) {
  5.       console.error('必须提供 header 插槽内容')
  6.     }
  7.   }
  8. }
复制代码
Q2：插槽内容如何访问子组件方法？
  1. <!-- 子组件暴露方法 -->
  2. <slot :doSomething="handleAction"></slot>
  4. <!-- 父组件使用 -->
  5. <template #default="{ doSomething }">
  6.   <button @click="doSomething">触发子组件方法</button>
  7. </template>
复制代码
Q3：如何实现插槽内容过渡动画？
  1. <transition name="fade" mode="out-in">
  2.   <slot></slot>
  3. </transition>
复制代码
八、综合应用案例

可设置的模态框组件
  1. <!-- Modal.vue -->
  2. <template>
  3.   <div class="modal" v-show="visible">
  4.     <div class="modal-header">
  5.       <slot name="header">
  6.         <h2>{{ title }}</h2>
  7.         <button @click="close">×</button>
  8.       </slot>
  9.     </div>
  10.    
  11.     <div class="modal-body">
  12.       <slot :close="close"></slot>
  13.     </div>
  15.     <div class="modal-footer">
  16.       <slot name="footer">
  17.         <button @click="close">关闭</button>
  18.       </slot>
  19.     </div>
  20.   </div>
  21. </template>
复制代码
父组件使用：
  1. <Modal v-model:visible="showModal" title="自定义标题">
  2.   <template #header>
  3.     <h1 style="color: red;">紧急通知</h1>
  4.   </template>
  6.   <template #default="{ close }">
  7.     <p>确认删除此项？</p>
  8.     <button @click="confirmDelete; close()">确认</button>
  9.   </template>
  11.   <template #footer>
  12.     <button @click="showModal = false">取消</button>
  13.   </template>
  14. </Modal>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/) Powered by Discuz! X3.4