Vue3组件通信全解析

前言

在开发 Vue3 应用时，组件之间的通信是一个核心问题。随着应用规模的增长，如何高效、清晰地在组件间传递数据变得尤为重要。本文将全面介绍 Vue3 中的各种组件通信方式，帮助你在不同场景下选择最合适的通信策略。

Vue3组件通信的基本概念

Vue3 的组件系统采用了树形结构，组件之间的关系可以分为以下几种：

graph TD
    A[父组件] --> B[子组件1]
    A --> C[子组件2]
    B --> D[孙子组件]

根据组件间的关系，通信方式可以分为：

父子组件通信
兄弟组件通信
跨层级组件通信
任意组件通信

Vue3常见的组件通信方式

Props和Emits

父组件向子组件传递数据：Props

Props 是 Vue3 中最基本的通信方式，用于父组件向子组件传递数据。

graph LR
    A[父组件] --props--> B[子组件]

父组件代码示例：

html

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const parentMessage = ref('来自父组件的数据')
</script>

子组件代码示例：

html

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
defineProps({
  message: {
    type: String,
    required: true
  }
})
</script>

子组件向父组件传递数据：Emits

子组件通过触发事件向父组件传递数据。

graph LR
    B[子组件] --emits--> A[父组件]

子组件代码示例：

html

<template>
  <div>
    <button @click="sendToParent">向父组件发送数据</button>
  </div>
</template>

<script setup>
const emit = defineEmits(['child-event'])

function sendToParent() {
  emit('child-event', '来自子组件的数据')
}
</script>

父组件代码示例：

html

<template>
  <div>
    <child-component @child-event="handleChildEvent"></child-component>
    <p>子组件传来的数据: {{ childData }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childData = ref('')

function handleChildEvent(data) {
  childData.value = data
}
</script>

Provide/Inject

Provide/Inject 适用于跨多层级的组件通信，尤其是祖先组件向后代组件传递数据。Vue3 中的 Provide/Inject 与 Composition API 结合，可以提供响应式数据。

graph TD
    A[祖先组件 provide] --> B[子组件]
    B --> C[孙子组件 inject]
    A -.-> |直接提供数据| C

祖先组件提供数据：

html

<template>
  <div>
    <child-component></child-component>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script setup>
import { ref, provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

const message = ref('来自祖先组件的数据')

function updateMessage() {
  message.value = '更新后的数据'
}

// 提供响应式数据
provide('message', message)

// 提供方法
provide('ancestorMethod', updateMessage)
</script>

孙子组件注入数据：

html

<template>
  <div>
    <p>从祖先组件注入的数据: {{ message }}</p>
    <button @click="ancestorMethod">调用祖先组件的方法</button>
  </div>
</template>

<script setup>
import { inject } from 'vue'

// 注入响应式数据
const message = inject('message')

// 注入方法
const ancestorMethod = inject('ancestorMethod')
</script>

状态管理 - Pinia

Pinia 是 Vue 官方推荐的状态管理库，比 Vuex 更轻量且与 TypeScript 集成更好。适用于中大型应用的组件通信。

graph TD
    S[Pinia Store] --> A[组件A]
    S --> B[组件B]
    S --> C[组件C]
    A --> S
    B --> S
    C --> S

定义 Store：

javascript

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    message: ''
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    },
    setMessage(message) {
      this.message = message
    }
  }
})

使用 Composition API 风格的 Store：

javascript

// stores/counter.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const message = ref('')
  
  const doubleCount = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }
  
  function setMessage(newMessage) {
    message.value = newMessage
  }
  
  return {
    count,
    message,
    doubleCount,
    increment,
    setMessage
  }
})

在组件中使用：

html

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <p>Double Count: {{ counterStore.doubleCount }}</p>
    <button @click="counterStore.increment()">增加</button>
    <button @click="counterStore.setMessage('新消息')">设置消息</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'

const counterStore = useCounterStore()
</script>

Refs

通过 ref 和 template refs 可以直接访问子组件的实例，从而调用子组件的方法或访问子组件暴露的数据。

graph LR
    A[父组件] --template refs--> B[子组件]

父组件代码：

html

<template>
  <div>
    <child-component ref="childComp"></child-component>
    <button @click="accessChild">访问子组件</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childComp = ref(null)

function accessChild() {
  // 访问子组件暴露的数据和方法
  console.log(childComp.value.exposedData)
  childComp.value.exposedMethod()
}

onMounted(() => {
  console.log('子组件实例:', childComp.value)
})
</script>

子组件代码：

html

<template>
  <div>
    <p>子组件内容</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const exposedData = ref('子组件的数据')

function exposedMethod() {
  console.log('子组件的方法被调用')
}

// 使用 defineExpose 暴露属性和方法给父组件
defineExpose({
  exposedData,
  exposedMethod
})
</script>

v-model

v-model 在 Vue3 中得到了增强，可以使用多个 v-model 绑定不同的属性，实现父子组件间的双向数据绑定。

graph TD
    A[父组件] --v-model--> B[子组件]
    B --update:modelValue--> A

父组件代码：

html

<template>
  <div>
    <p>父组件中的值: {{ text }}</p>
    <p>父组件中的标题: {{ title }}</p>
    <custom-input 
      v-model="text"
      v-model:title="title"
    ></custom-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'

const text = ref('')
const title = ref('默认标题')
</script>

子组件代码：

html

<template>
  <div>
    <input 
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
      placeholder="输入内容"
    />
    <input 
      :value="title"
      @input="$emit('update:title', $event.target.value)"
      placeholder="输入标题"
    />
  </div>
</template>

<script setup>
defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  }
})

defineEmits(['update:modelValue', 'update:title'])
</script>

Teleport

Teleport 允许将组件的一部分内容渲染到 DOM 的不同位置，适用于模态框、提示框等场景。

graph TD
    A[组件] --内容--> B[Teleport]
    B --渲染--> C[DOM其他位置]

使用 Teleport 的示例：

html

<template>
  <div>
    <button @click="showModal = true">打开模态框</button>
    
    <teleport to="body">
      <div v-if="showModal" class="modal">
        <div class="modal-content">
          <h2>模态框标题</h2>
          <p>模态框内容</p>
          <button @click="showModal = false">关闭</button>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showModal = ref(false)
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  max-width: 500px;
}
</style>

mitt - 全局事件总线

虽然 Vue3 移除了内置的事件总线，但可以使用 mitt 库作为替代，用于任意组件间的通信。

graph LR
    A[组件A] --emit--> M[mitt]
    M --on--> B[组件B]

安装 mitt：

bash

npm install mitt

创建事件总线：

javascript

// eventBus.js
import mitt from 'mitt'
const emitter = mitt()
export default emitter

组件 A 发送事件：

html

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script setup>
import emitter from './eventBus.js'

function sendMessage() {
  emitter.emit('custom-event', '这是要传递的数据')
}
</script>

组件 B 接收事件：

html

<template>
  <div>
    <p>接收到的消息: {{ message }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import emitter from './eventBus.js'

const message = ref('')

function handleEvent(data) {
  message.value = data
}

onMounted(() => {
  emitter.on('custom-event', handleEvent)
})

onUnmounted(() => {
  emitter.off('custom-event', handleEvent)
})
</script>

最佳实践与使用场景

以下是不同通信方式的适用场景：

通信方式	适用场景	优点	缺点
Props/Emits	父子组件通信	简单直接，Vue官方推荐	层级较深时不便
Provide/Inject	深层次组件通信	避免props逐级传递，支持响应式	使组件耦合度增加
Pinia	中大型应用，复杂状态管理	类型安全，模块化，支持devtools	小型应用可能过于复杂
Refs	父组件访问子组件	直接访问组件实例和暴露的方法	增加组件耦合
v-model	表单组件或需要双向绑定	简化代码，支持多个绑定	仅适用于特定场景
Teleport	需要将内容渲染到DOM其他位置	解决z-index和CSS继承问题	不是真正的组件通信
mitt	任意组件间通信	轻量级，使用简单	事件难以追踪，需额外管理

组件通信决策流程图

flowchart TD
    A[开始] --> B{是否为父子组件通信?}
    B -->|是| C[使用Props/Emits]
    B -->|否| D{是否为兄弟组件通信?}
    D -->|是| E{应用规模?}
    E -->|小型| F[使用共同父组件或Provide/Inject]
    E -->|中大型| G[使用Pinia]
    D -->|否| H{是否为跨多层级组件通信?}
    H -->|是| I[使用Provide/Inject]
    H -->|否| J{是否需要全局状态管理?}
    J -->|是| K[使用Pinia]
    J -->|否| L{是否需要直接操作子组件?}
    L -->|是| M[使用Refs]
    L -->|否| N{是否需要双向绑定?}
    N -->|是| O[使用v-model]
    N -->|否| P{是否需要将内容渲染到DOM其他位置?}
    P -->|是| Q[使用Teleport]
    P -->|否| R[使用mitt事件总线]

总结

Vue3 提供了多种组件通信方式，每种方式都有其适用场景：

Props/Emits：最基本的父子组件通信方式
Provide/Inject：适用于深层次组件通信，支持响应式
Pinia：适用于复杂的状态管理，替代Vuex
Refs：直接访问子组件暴露的属性和方法
v-model：实现组件的双向绑定，支持多个绑定
Teleport：将内容渲染到DOM的不同位置
mitt：轻量级的事件总线，用于任意组件通信

在实际开发中，应根据应用规模和复杂度选择合适的通信方式。对于简单组件，Props/Emits 通常就足够了；对于复杂应用，可能需要结合使用多种通信方式。

Vue3 的 Composition API 为组件通信提供了更多可能性，使代码更加灵活和可维护。无论选择哪种通信方式，保持组件之间的低耦合和高内聚始终是良好架构设计的核心原则。

Vue3组件通信全解析 ​

目录 ​

前言 ​

Vue3组件通信的基本概念 ​

Vue3常见的组件通信方式 ​

Props和Emits ​

Provide/Inject ​

状态管理 - Pinia ​

Refs ​

v-model ​

Teleport ​

mitt - 全局事件总线 ​

最佳实践与使用场景 ​

组件通信决策流程图 ​

总结 ​

Vue3组件通信全解析

目录

前言

Vue3组件通信的基本概念

Vue3常见的组件通信方式

Props和Emits

Provide/Inject

状态管理 - Pinia

Refs

v-model

Teleport

mitt - 全局事件总线

最佳实践与使用场景

组件通信决策流程图

总结