CodePoet

Vue组件通信系统深度解析：从父子传递到全局状态管理

•匿名
#Vue#组件通信#状态管理#事件系统#数据流

Vue组件通信系统深度解析：从父子传递到全局状态管理

在Vue应用开发中，组件间的数据通信是核心需求之一。Vue提供了多种通信方式来应对不同的场景需求，从简单的父子组件通信到复杂的跨层级状态管理。本文将深入解析Vue组件通信系统的各种实现方式及其底层原理。

Vue组件通信的整体架构

通信方式分类

根据组件关系和数据流向，Vue的通信方式可以分为：

父组件
├── 子组件A (兄弟关系)
├── 子组件B
│   ├── 孙组件C (跨层级关系)
│   └── 孙组件D
└── 子组件E

通信类型：

  • 父子通信：props down, events up
  • 兄弟通信：事件总线、状态提升
  • 跨层级通信：provide/inject、全局状态管理
  • 全局通信：Vuex、Pinia、全局事件总线

1. 父子组件通信

Props向下传递

基本使用：

<!-- 父组件 -->
<template>
  <ChildComponent 
    :message="parentMessage" 
    :user="userInfo"
    :count="42"
  />
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import ChildComponent from './ChildComponent.vue'

const parentMessage = ref('Hello from parent')
const userInfo = reactive({ name: 'John', age: 25 })
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ user.name }} - {{ user.age }}</p>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script setup lang="ts">
interface User {
  name: string
  age: number
}

interface Props {
  message: string
  user?: User
  count?: number
}

const props = withDefaults(defineProps<Props>(), {
  user: () => ({ name: '', age: 0 }),
  count: 0
})

// 自定义验证器
if (props.count !== undefined && props.count < 0) {
  console.warn('Count should be >= 0')
}
</script>

Props的底层实现原理：

// Vue内部的props处理机制
function initProps(vm, propsOptions) {
  const propsData = vm.$options.propsData || {};
  const props = vm._props = {};
  
  for (const key in propsOptions) {
    const value = validateProp(key, propsOptions, propsData, vm);
    
    // 将props定义为响应式属性
    defineReactive(props, key, value, () => {
      // 开发环境下的props变更警告
      if (!isRoot && !isUpdatingChildComponent) {
        warn(`Avoid mutating a prop directly...`);
      }
    });
    
    // 代理到vm实例上
    if (!(key in vm)) {
      proxy(vm, '_props', key);
    }
  }
}

// Props验证和转换
function validateProp(key, propOptions, propsData, vm) {
  const prop = propOptions[key];
  const absent = !hasOwn(propsData, key);
  let value = propsData[key];
  
  // 类型检查
  if (prop.type) {
    const valid = assertType(value, prop.type);
    if (!valid) {
      warn(`Invalid prop: type check failed for prop "${key}"`);
    }
  }
  
  // 默认值处理
  if (value === undefined) {
    value = getPropDefaultValue(vm, prop, key);
  }
  
  // 自定义验证器
  if (prop.validator && !prop.validator(value)) {
    warn(`Invalid prop: custom validator check failed for prop "${key}"`);
  }
  
  return value;
}

$emit事件向上传递

基本使用：

<!-- 子组件 -->
<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup lang="ts">
interface ClickPayload {
  message: string
  timestamp: number
}

const emit = defineEmits<{
  'child-clicked': [payload: ClickPayload]
}>()

const handleClick = () => {
  // 向父组件发送事件
  emit('child-clicked', {
    message: 'Button was clicked',
    timestamp: Date.now()
  })
}
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @child-clicked="onChildClicked" />
</template>

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue'

interface ClickPayload {
  message: string
  timestamp: number
}

const onChildClicked = (payload: ClickPayload) => {
  console.log('Child event received:', payload)
}
</script>

$emit的底层实现：

// Vue实例的事件发射机制
Vue.prototype.$emit = function(event, ...args) {
  const vm = this;
  
  // 获取当前实例的事件监听器
  let cbs = vm._events[event];
  if (cbs) {
    cbs = cbs.length > 1 ? toArray(cbs) : cbs;
    
    // 执行所有监听器
    for (let i = 0, l = cbs.length; i < l; i++) {
      try {
        cbs[i].apply(vm, args);
      } catch (e) {
        handleError(e, vm, `event handler for "${event}"`);
      }
    }
  }
  return vm;
};

// 组件编译时的事件绑定
function genHandler(name, handler) {
  if (!handler) {
    return 'function(){}';
  }
  
  if (Array.isArray(handler)) {
    return `[${handler.map(h => genHandler(name, h)).join(',')}]`;
  }
  
  const isMethodPath = simplePathRE.test(handler.value);
  const isFunctionExpression = fnExpRE.test(handler.value);
  
  if (!handler.modifiers) {
    if (isMethodPath || isFunctionExpression) {
      return handler.value;
    }
    return `function($event){${handler.value}}`;
  } else {
    // 处理事件修饰符
    return genHandlerWithModifiers(name, handler);
  }
}

v-model双向绑定（Vue3替代.sync）

Vue3中的v-model语法：

<!-- 使用v-model -->
<ChildComponent v-model:title="pageTitle" />

<!-- 等价于 -->
<ChildComponent 
  :title="pageTitle" 
  @update:title="pageTitle = $event" 
/>

<!-- 多个v-model -->
<ChildComponent 
  v-model:title="pageTitle"
  v-model:content="pageContent"
/>

子组件中的使用：

<template>
  <input 
    :value="title" 
    @input="updateTitle($event.target.value)"
    placeholder="Enter title"
  />
</template>

<script setup lang="ts">
interface Props {
  title: string
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:title': [value: string]
}>()

const updateTitle = (newTitle: string) => {
  // 触发update:title事件
  emit('update:title', newTitle)
}
</script>

自定义v-model修饰符：

<!-- 父组件 -->
<ChildComponent v-model:title.capitalize="pageTitle" />

<!-- 子组件 -->
<script setup lang="ts">
interface Props {
  title: string
  titleModifiers?: { capitalize?: boolean }
}

const props = withDefaults(defineProps<Props>(), {
  titleModifiers: () => ({})
})

const emit = defineEmits<{
  'update:title': [value: string]
}>()

const updateTitle = (value: string) => {
  let newValue = value
  if (props.titleModifiers.capitalize) {
    newValue = value.charAt(0).toUpperCase() + value.slice(1)
  }
  emit('update:title', newValue)
}
</script>

2. 兄弟组件通信

事件总线（EventBus）

创建全局事件总线：

// eventBus.ts
import mitt, { type Emitter } from 'mitt'

type Events = {
  'message-from-a': { data: string; timestamp: number }
  'user-updated': { id: number; name: string }
  'theme-changed': { theme: 'light' | 'dark' }
}

// 使用mitt库创建事件总线
export const EventBus: Emitter<Events> = mitt<Events>()

// 或者自定义实现
class CustomEventBus {
  private events: Record<string, Function[]> = {}
  
  on<T>(event: string, callback: (payload: T) => void) {
    if (!this.events[event]) {
      this.events[event] = []
    }
    this.events[event].push(callback)
  }
  
  emit<T>(event: string, payload: T) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(payload))
    }
  }
  
  off(event: string, callback?: Function) {
    if (this.events[event]) {
      if (callback) {
        const index = this.events[event].indexOf(callback)
        if (index > -1) {
          this.events[event].splice(index, 1)
        }
      } else {
        delete this.events[event]
      }
    }
  }
}

export const CustomBus = new CustomEventBus()

兄弟组件间通信：

<!-- 组件A -->
<template>
  <button @click="sendMessage">Send to B</button>
</template>

<script setup lang="ts">
import { EventBus } from './eventBus'

const sendMessage = () => {
  EventBus.emit('message-from-a', {
    data: 'Hello from Component A',
    timestamp: Date.now()
  })
}
</script>

<!-- 组件B -->
<template>
  <div>{{ receivedMessage }}</div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { EventBus } from './eventBus'

const receivedMessage = ref('')

const handleMessage = (payload: { data: string; timestamp: number }) => {
  receivedMessage.value = payload.data
}

onMounted(() => {
  // 监听来自组件A的消息
  EventBus.on('message-from-a', handleMessage)
})

onBeforeUnmount(() => {
  // 清理事件监听器
  EventBus.off('message-from-a', handleMessage)
})

// beforeUnmount阶段详细说明：
// 1. 组件实例仍然完全可用
// 2. 可以访问所有响应式数据和方法
// 3. 适合执行清理工作：
//    - 清理定时器
//    - 移除事件监听器
//    - 取消网络请求
//    - 清理第三方库实例
//    - 移除DOM事件监听
</script>

<!-- 完整的生命周期清理示例 -->
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'

const timer = ref<number>()
const abortController = ref<AbortController>()
const observer = ref<IntersectionObserver>()

onMounted(() => {
  // 设置定时器
  timer.value = setInterval(() => {
    console.log('Timer tick')
  }, 1000)
  
  // 网络请求
  abortController.value = new AbortController()
  fetch('/api/data', { signal: abortController.value.signal })
  
  // 设置观察器
  observer.value = new IntersectionObserver((entries) => {
    // 处理交叉观察
  })
})

onBeforeUnmount(() => {
  // 清理定时器
  if (timer.value) {
    clearInterval(timer.value)
  }
  
  // 取消网络请求
  if (abortController.value) {
    abortController.value.abort()
  }
  
  // 清理观察器
  if (observer.value) {
    observer.value.disconnect()
  }
  
  // 清理全局事件监听
  window.removeEventListener('scroll', handleScroll)
  document.removeEventListener('click', handleDocumentClick)
})
</script>

EventBus的底层实现：

// 简化版的事件总线实现
class SimpleEventBus {
  constructor() {
    this.events = {};
  }
  
  // 监听事件
  $on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }
  
  // 发射事件
  $emit(event, ...args) {
    if (this.events[event]) {
      this.events[event].forEach(callback => {
        callback.apply(this, args);
      });
    }
  }
  
  // 移除事件监听器
  $off(event, callback) {
    if (this.events[event]) {
      if (callback) {
        const index = this.events[event].indexOf(callback);
        if (index > -1) {
          this.events[event].splice(index, 1);
        }
      } else {
        delete this.events[event];
      }
    }
  }
  
  // 一次性事件监听
  $once(event, callback) {
    const onceCallback = (...args) => {
      callback.apply(this, args);
      this.$off(event, onceCallback);
    };
    this.$on(event, onceCallback);
  }
}

状态提升模式

将共享状态提升到共同父组件：

<!-- 父组件 -->
<template>
  <div>
    <ComponentA 
      :shared-data="sharedState" 
      @update-data="updateSharedData" 
    />
    <ComponentB 
      :shared-data="sharedState" 
      @update-data="updateSharedData" 
    />
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

interface SharedState {
  count: number
  message: string
}

const sharedState = reactive<SharedState>({
  count: 0,
  message: 'Shared message'
})

const updateSharedData = (newData: Partial<SharedState>) => {
  Object.assign(sharedState, newData)
}
</script>

子组件示例：

<!-- ComponentA.vue -->
<template>
  <div>
    <h3>Component A</h3>
    <p>Count: {{ sharedData.count }}</p>
    <p>Message: {{ sharedData.message }}</p>
    <button @click="increment">Increment</button>
    <input 
      v-model="localMessage" 
      @input="updateMessage"
      placeholder="Update message"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface SharedData {
  count: number
  message: string
}

interface Props {
  sharedData: SharedData
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update-data': [data: Partial<SharedData>]
}>()

const localMessage = ref(props.sharedData.message)

const increment = () => {
  emit('update-data', { count: props.sharedData.count + 1 })
}

const updateMessage = () => {
  emit('update-data', { message: localMessage.value })
}

// 同步外部变化到本地状态
watch(() => props.sharedData.message, (newMessage) => {
  localMessage.value = newMessage
})
</script>

3. 跨层级通信

provide/inject依赖注入

基本使用：

<!-- 祖先组件 -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script setup lang="ts">
import { provide, reactive, readonly } from 'vue'
import ChildComponent from './ChildComponent.vue'

interface User {
  name: string
  role: 'admin' | 'user'
}

const currentUser = reactive<User>({ 
  name: 'John', 
  role: 'admin' 
})

const updateUser = (newUser: Partial<User>) => {
  Object.assign(currentUser, newUser)
}

// 提供响应式数据
provide('theme', 'dark')
provide('user', readonly(currentUser)) // 只读，防止子组件直接修改
provide('updateUser', updateUser)

// 或者使用injection key提供类型安全
import type { InjectionKey, Ref } from 'vue'

export const themeKey = Symbol() as InjectionKey<string>
export const userKey = Symbol() as InjectionKey<Readonly<User>>
export const updateUserKey = Symbol() as InjectionKey<(user: Partial<User>) => void>

provide(themeKey, 'dark')
provide(userKey, readonly(currentUser))
provide(updateUserKey, updateUser)
</script>

<!-- 深层子组件 -->
<template>
  <div :class="theme">
    <p>User: {{ user?.name }}</p>
    <p>Role: {{ user?.role }}</p>
    <button @click="changeUser">Change User</button>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import type { User } from '../types'

// 基本注入
const theme = inject<string>('theme', 'light') // 提供默认值
const user = inject<Readonly<User>>('user')
const updateUser = inject<(user: Partial<User>) => void>('updateUser')

// 使用injection key（类型安全）
import { themeKey, userKey, updateUserKey } from './ParentComponent.vue'

const themeTyped = inject(themeKey, 'light')
const userTyped = inject(userKey)
const updateUserTyped = inject(updateUserKey)

const changeUser = () => {
  updateUser?.({ name: 'Jane', role: 'user' })
  // 或者使用类型安全版本
  updateUserTyped?.({ name: 'Jane', role: 'user' })
}
</script>

响应式provide/inject模式：

<!-- 祖先组件 -->
<script setup lang="ts">
import { provide, ref, computed } from 'vue'

const count = ref(0)
const theme = ref<'light' | 'dark'>('light')

// 提供响应式状态
provide('count', count)
provide('theme', theme)

// 提供计算属性
provide('doubleCount', computed(() => count.value * 2))

// 提供方法
provide('increment', () => count.value++)
provide('toggleTheme', () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
})
</script>

provide/inject的底层实现：

// 初始化provide
function initProvide(vm) {
  const provide = vm.$options.provide;
  if (provide) {
    vm._provided = typeof provide === 'function'
      ? provide.call(vm)
      : provide;
  }
}

// 初始化inject
function initInjections(vm) {
  const inject = vm.$options.inject;
  if (inject) {
    const isArray = Array.isArray(inject);
    const keys = isArray ? inject : Object.keys(inject);
    
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i];
      const provideKey = isArray ? key : inject[key].from || key;
      const source = resolveInject(provideKey, vm);
      
      if (source) {
        // 将注入的值定义为响应式属性
        defineReactive(vm, key, source[provideKey]);
      } else if (inject[key].default !== undefined) {
        // 使用默认值
        const defaultValue = inject[key].default;
        defineReactive(vm, key, 
          typeof defaultValue === 'function' 
            ? defaultValue.call(vm) 
            : defaultValue
        );
      }
    }
  }
}

// 解析注入的依赖
function resolveInject(key, vm) {
  let source = vm;
  while (source) {
    if (source._provided && hasOwn(source._provided, key)) {
      return source._provided;
    }
    source = source.$parent;
  }
  return null;
}

响应式的provide/inject（Vue 3）

<!-- Vue 3中的响应式注入 -->
<script setup>
import { provide, ref, reactive } from 'vue';

const theme = ref('dark');
const user = reactive({ name: 'John', role: 'admin' });

// 提供响应式数据
provide('theme', theme);
provide('user', user);
provide('updateTheme', (newTheme) => {
  theme.value = newTheme;
});
</script>

<!-- 子组件中注入 -->
<script setup>
import { inject } from 'vue';

const theme = inject('theme');
const user = inject('user');
const updateTheme = inject('updateTheme');

// 响应式数据会自动更新视图
</script>

4. 全局状态管理

Vuex状态管理

Vuex的核心概念：

// store.js
import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0,
    user: null,
    todos: []
  },
  
  mutations: {
    INCREMENT(state) {
      state.count++;
    },
    SET_USER(state, user) {
      state.user = user;
    },
    ADD_TODO(state, todo) {
      state.todos.push(todo);
    }
  },
  
  actions: {
    async fetchUser({ commit }, userId) {
      const user = await api.getUser(userId);
      commit('SET_USER', user);
    },
    
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('INCREMENT');
      }, 1000);
    }
  },
  
  getters: {
    completedTodos: state => {
      return state.todos.filter(todo => todo.completed);
    },
    
    todoCount: (state, getters) => {
      return getters.completedTodos.length;
    }
  }
});

Vuex的底层实现原理：

// 简化版的Vuex实现
class SimpleStore {
  constructor(options) {
    this.state = new Vue({
      data: options.state
    });
    
    this.mutations = options.mutations || {};
    this.actions = options.actions || {};
    this.getters = {};
    
    // 初始化getters
    this.initGetters(options.getters || {});
  }
  
  // 提交mutation
  commit(type, payload) {
    const mutation = this.mutations[type];
    if (mutation) {
      mutation(this.state, payload);
    } else {
      console.error(`Unknown mutation type: ${type}`);
    }
  }
  
  // 分发action
  dispatch(type, payload) {
    const action = this.actions[type];
    if (action) {
      return action({
        state: this.state,
        commit: this.commit.bind(this),
        dispatch: this.dispatch.bind(this)
      }, payload);
    } else {
      console.error(`Unknown action type: ${type}`);
    }
  }
  
  // 初始化getters
  initGetters(getters) {
    Object.keys(getters).forEach(key => {
      Object.defineProperty(this.getters, key, {
        get: () => getters[key](this.state, this.getters)
      });
    });
  }
}

// Vue插件安装
function install(Vue) {
  Vue.mixin({
    beforeCreate() {
      if (this.$options.store) {
        this.$store = this.$options.store;
      } else if (this.$parent && this.$parent.$store) {
        this.$store = this.$parent.$store;
      }
    }
  });
}

组件中使用Vuex（Vue3版本）

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>User: {{ user?.name }}</p>
    <p>Completed Todos: {{ completedTodosCount }}</p>
    
    <button @click="increment">Increment</button>
    <button @click="fetchUserData">Fetch User</button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'
import type { RootState } from '@/store/types'

const store = useStore<RootState>()

// 访问state
const count = computed(() => store.state.count)
const user = computed(() => store.state.user)

// 访问getters
const completedTodosCount = computed(() => store.getters.todoCount)

// 调用mutations
const increment = () => {
  store.commit('INCREMENT')
}

// 调用actions
const fetchUserData = () => {
  store.dispatch('fetchUser', 123)
}
</script>

使用Pinia（Vue3推荐）

创建Pinia Store：

// stores/user.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import type { User } from '@/types'

// Setup Store (推荐)
export const useUserStore = defineStore('user', () => {
  // State
  const user = ref<User | null>(null)
  const count = ref(0)
  const todos = ref<Todo[]>([])

  // Getters
  const completedTodos = computed(() => 
    todos.value.filter(todo => todo.completed)
  )
  
  const todoCount = computed(() => completedTodos.value.length)
  
  const isLoggedIn = computed(() => user.value !== null)

  // Actions
  const increment = () => {
    count.value++
  }

  const async fetchUser(userId: number) => {
    try {
      const userData = await api.getUser(userId)
      user.value = userData
    } catch (error) {
      console.error('Failed to fetch user:', error)
    }
  }

  const setUser = (userData: User) => {
    user.value = userData
  }

  const logout = () => {
    user.value = null
  }

  const addTodo = (todo: Omit<Todo, 'id'>) => {
    todos.value.push({
      id: Date.now(),
      ...todo
    })
  }

  return {
    // State
    user,
    count,
    todos,
    
    // Getters
    completedTodos,
    todoCount,
    isLoggedIn,
    
    // Actions
    increment,
    fetchUser,
    setUser,
    logout,
    addTodo
  }
})

// Options Store (可选)
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name: 'Counter'
  }),

  getters: {
    doubleCount: (state) => state.count * 2,
    
    // 使用其他getter
    quadrupleCount(): number {
      return this.doubleCount * 2
    }
  },

  actions: {
    increment() {
      this.count++
    },
    
    async incrementAsync() {
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.increment()
    }
  }
})

组件中使用Pinia：

<template>
  <div>
    <p>Count: {{ userStore.count }}</p>
    <p>User: {{ userStore.user?.name }}</p>
    <p>Completed Todos: {{ userStore.todoCount }}</p>
    <p>Is Logged In: {{ userStore.isLoggedIn }}</p>
    
    <button @click="userStore.increment">Increment</button>
    <button @click="fetchUser">Fetch User</button>
    <button @click="addNewTodo">Add Todo</button>
    
    <!-- 使用storeToRefs保持响应性 -->
    <div>
      <p>Counter: {{ count }}</p>
      <p>Double: {{ doubleCount }}</p>
      <button @click="increment">Counter Increment</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user'
import { useCounterStore } from '@/stores/counter'

const userStore = useUserStore()
const counterStore = useCounterStore()

// 使用storeToRefs解构响应式状态
const { count, doubleCount } = storeToRefs(counterStore)
const { increment } = counterStore // actions可以直接解构

const fetchUser = () => {
  userStore.fetchUser(123)
}

const addNewTodo = () => {
  userStore.addTodo({
    title: 'New Todo',
    completed: false
  })
}
</script>

Pinia的优势：

  • ✅ 完整的TypeScript支持
  • ✅ 极其轻量（~1kb）
  • ✅ 去除了mutations，只有state、getters和actions
  • ✅ 支持多个stores
  • ✅ 支持插件扩展
  • ✅ 支持SSR
  • ✅ 开发工具支持

5. Vue3独有的通信方式

defineExpose暴露组件方法

子组件暴露方法和属性：

<!-- ChildComponent.vue -->
<template>
  <div>
    <input ref="inputRef" v-model="inputValue" />
    <p>Count: {{ count }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const inputRef = ref<HTMLInputElement>()
const inputValue = ref('')
const count = ref(0)

const focusInput = () => {
  inputRef.value?.focus()
}

const increment = () => {
  count.value++
}

const reset = () => {
  count.value = 0
  inputValue.value = ''
}

// 暴露给父组件的方法和属性
defineExpose({
  focusInput,
  increment,
  reset,
  count: readonly(count),
  inputValue: readonly(inputValue)
})
</script>

父组件调用子组件方法：

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="focusChild">Focus Child Input</button>
    <button @click="incrementChild">Increment Child</button>
    <button @click="resetChild">Reset Child</button>
    <p>Child count: {{ childCount }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childRef = ref<InstanceType<typeof ChildComponent>>()

const focusChild = () => {
  childRef.value?.focusInput()
}

const incrementChild = () => {
  childRef.value?.increment()
}

const resetChild = () => {
  childRef.value?.reset()
}

const childCount = computed(() => childRef.value?.count || 0)
</script>

Teleport传送门通信

跨DOM层级渲染：

<!-- 模态框组件 -->
<template>
  <Teleport to="body">
    <div v-if="isVisible" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <h3>{{ title }}</h3>
        <slot></slot>
        <button @click="closeModal">Close</button>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
interface Props {
  isVisible: boolean
  title: string
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:isVisible': [value: boolean]
}>()

const closeModal = () => {
  emit('update:isVisible', false)
}
</script>

使用Teleport组件：

<template>
  <div class="app">
    <button @click="showModal = true">Open Modal</button>
    
    <!-- 模态框会被传送到body下 -->
    <ModalComponent 
      v-model:is-visible="showModal"
      title="My Modal"
    >
      <p>Modal content here</p>
    </ModalComponent>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ModalComponent from './ModalComponent.vue'

const showModal = ref(false)
</script>

Suspense异步组件通信

异步组件加载：

<!-- AsyncComponent.vue -->
<template>
  <div>
    <h3>Async Data Loaded</h3>
    <p>{{ data.title }}</p>
    <p>{{ data.content }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface AsyncData {
  title: string
  content: string
}

// 模拟异步数据获取
const data = ref<AsyncData>()

const fetchData = async (): Promise<AsyncData> => {
  await new Promise(resolve => setTimeout(resolve, 2000))
  return {
    title: 'Async Title',
    content: 'This is async content'
  }
}

// 在setup中使用async/await
data.value = await fetchData()
</script>

使用Suspense包装：

<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      
      <template #fallback>
        <div class="loading">Loading...</div>
      </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() => 
  import('./AsyncComponent.vue')
)
</script>

6. 现代Vue 3的通信方式

Composition API中的状态共享

// composables/useSharedState.js
import { ref, reactive } from 'vue';

// 全局共享状态
const globalState = reactive({
  user: null,
  theme: 'light',
  notifications: []
});

const isLoading = ref(false);

export function useSharedState() {
  const updateUser = (user) => {
    globalState.user = user;
  };
  
  const toggleTheme = () => {
    globalState.theme = globalState.theme === 'light' ? 'dark' : 'light';
  };
  
  const addNotification = (notification) => {
    globalState.notifications.push({
      id: Date.now(),
      ...notification
    });
  };
  
  return {
    // 状态
    globalState,
    isLoading,
    
    // 方法
    updateUser,
    toggleTheme,
    addNotification
  };
}

<!-- 组件中使用 -->
<script setup>
import { useSharedState } from '@/composables/useSharedState';

const { globalState, updateUser, toggleTheme } = useSharedState();

// 响应式状态会自动更新视图
</script>

<template>
  <div :class="globalState.theme">
    <p>Current theme: {{ globalState.theme }}</p>
    <button @click="toggleTheme">Toggle Theme</button>
  </div>
</template>

高级通信模式

全局状态 + 局部状态混合模式：

<!-- 用户设置组件 -->
<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { useLocalStorage } from '@vueuse/core'

// 全局状态
const userStore = useUserStore()
const { user } = storeToRefs(userStore)

// 局部持久化状态
const localSettings = useLocalStorage('user-settings', {
  theme: 'light',
  language: 'en',
  notifications: true
})

// 混合状态管理
const saveSettings = async () => {
  // 更新全局状态
  await userStore.updateUserPreferences(localSettings.value)
  
  // 本地状态自动持久化
  localSettings.value = { ...localSettings.value }
}
</script>

响应式依赖注入模式：

// composables/useTheme.ts
import { inject, provide, ref, computed, type InjectionKey } from 'vue'

interface ThemeContext {
  theme: Ref<'light' | 'dark'>
  toggleTheme: () => void
  isDark: ComputedRef<boolean>
}

const ThemeKey: InjectionKey<ThemeContext> = Symbol('theme')

export function provideTheme() {
  const theme = ref<'light' | 'dark'>('light')
  
  const toggleTheme = () => {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }
  
  const isDark = computed(() => theme.value === 'dark')
  
  const themeContext: ThemeContext = {
    theme,
    toggleTheme,
    isDark
  }
  
  provide(ThemeKey, themeContext)
  
  return themeContext
}

export function useTheme() {
  const themeContext = inject(ThemeKey)
  if (!themeContext) {
    throw new Error('useTheme must be used within a theme provider')
  }
  return themeContext
}

组合多个Composables：

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { useTheme } from '@/composables/useTheme'
import { useNotifications } from '@/composables/useNotifications'
import { usePermissions } from '@/composables/usePermissions'

// 组合多个状态管理
const userStore = useUserStore()
const { theme, toggleTheme } = useTheme()
const { notifications, addNotification } = useNotifications()
const { hasPermission } = usePermissions()

// 复合逻辑
const canEditProfile = computed(() => 
  hasPermission('edit-profile') && userStore.isLoggedIn
)

const handleProfileUpdate = async () => {
  if (!canEditProfile.value) {
    addNotification({
      type: 'error',
      message: 'No permission to edit profile'
    })
    return
  }
  
  try {
    await userStore.updateProfile(profileData.value)
    addNotification({
      type: 'success',
      message: 'Profile updated successfully'
    })
  } catch (error) {
    addNotification({
      type: 'error',
      message: 'Failed to update profile'
    })
  }
}
</script>

7. 通信方式选择指南

根据场景选择合适的通信方式

父子组件通信：

  • ✅ 使用 props + defineEmits
  • ✅ 使用 v-model（Vue3多模型支持）
  • ✅ 使用 defineExpose 暴露子组件方法

兄弟组件通信：

  • ✅ 状态提升到共同父组件
  • ✅ 使用 provide/inject（Vue3响应式增强）
  • ✅ Composition API共享状态
  • ⚠️ EventBus（小型应用，使用mitt库）

跨层级通信：

  • ✅ provide/inject（Vue3首选，支持响应式）
  • ✅ Pinia（现代状态管理）
  • ✅ Composition API + 全局状态
  • ✅ Teleport（DOM传送）

全局状态管理：

  • ✅ Pinia（Vue3官方推荐）
  • ✅ Vuex 4（Vue3兼容版本）
  • ✅ 自定义响应式全局状态
  • ✅ Composables模式

性能考虑

避免过度通信：

<!-- ❌ 避免：频繁的深层数据传递 -->
<GrandChild :deeply-nested-prop="a.b.c.d.e" />

<!-- ✅ 推荐：使用provide/inject -->
<script setup lang="ts">
import { provide, computed } from 'vue'

const nestedData = computed(() => a.b.c.d.e)
provide('nestedData', nestedData)
</script>

<!-- ✅ 更好：使用Pinia store -->
<script setup lang="ts">
import { useDataStore } from '@/stores/data'

const dataStore = useDataStore()
// 子组件直接使用store，避免props传递
</script>

合理使用事件总线：

// ❌ 避免：全局事件总线滥用
EventBus.emit('global-update', massiveData)

// ✅ 推荐：局部状态管理
const localState = reactive({ data: massiveData })

// ✅ 更好：使用Composable
// composables/useSharedData.ts
import { ref, reactive } from 'vue'

const sharedData = reactive({ data: null })
const isLoading = ref(false)

export function useSharedData() {
  const updateData = (newData: any) => {
    sharedData.data = newData
  }
  
  return {
    sharedData: readonly(sharedData),
    isLoading,
    updateData
  }
}

性能优化最佳实践：

<!-- ✅ 使用shallowRef优化大对象 -->
<script setup lang="ts">
import { shallowRef, triggerRef } from 'vue'

const largeData = shallowRef({ /* 大量数据 */ })

const updateLargeData = (newData) => {
  largeData.value = newData
  triggerRef(largeData) // 手动触发更新
}
</script>

<!-- ✅ 使用markRaw避免不必要的响应式 -->
<script setup lang="ts">
import { markRaw, ref } from 'vue'

const nonReactiveData = ref(markRaw({
  heavyObject: new SomeHeavyClass()
}))
</script>

<!-- ✅ 合理使用v-memo优化渲染 -->
<template>
  <div v-for="item in list" :key="item.id" v-memo="[item.id, item.name]">
    <ExpensiveComponent :item="item" />
  </div>
</template>

总结

Vue的组件通信系统提供了丰富而灵活的解决方案：

核心原则

  1. 单向数据流：数据向下流动，事件向上传递
  2. 就近原则：优先使用最简单、最直接的通信方式
  3. 状态管理：复杂状态使用专门的状态管理工具
  4. 性能优化：避免不必要的数据传递和事件监听

Vue3最佳实践

小型应用（<50组件）：

  • ✅ props + defineEmits
  • ✅ provide/inject（响应式）
  • ✅ Composition API共享状态

中型应用（50-200组件）：

  • ✅ Pinia状态管理
  • ✅ Composables模式
  • ✅ provide/inject + useState模式
  • ⚠️ mitt事件总线（特定场景）

大型应用（>200组件）：

  • ✅ Pinia + 模块化store
  • ✅ 微前端架构支持
  • ✅ 类型安全的依赖注入
  • ✅ 全局状态 + 局部状态混合管理

Vue3通信方式现代化特点

类型安全：

// 完整的TypeScript支持
interface Props {
  user: User
  onUpdate: (user: User) => void
}

const props = defineProps<Props>()
const emit = defineEmits<{
  'user-updated': [user: User]
}>()

性能优化：

<script setup lang="ts">
// 按需响应式
const { user } = storeToRefs(useUserStore())
const { updateUser } = useUserStore() // 方法不需要响应式

// 浅层响应式大对象
const largeData = shallowReactive(massiveObject)
</script>

开发体验：

<script setup lang="ts">
// 自动导入
const route = useRoute()
const router = useRouter()
const store = useUserStore()

// 更简洁的语法
const { user, isLoading } = storeToRefs(store)
</script>

发展趋势与未来展望

当前趋势：

  • 🚀 Composition API成为主流开发模式
  • 🚀 Pinia替代Vuex成为官方推荐
  • 🚀 script setup提供更简洁的语法
  • 🚀 TypeScript深度集成，类型安全优先

架构演进：

  • 📈 从Options API → Composition API
  • 📈 从Vuex → Pinia
  • 📈 从EventBus → 响应式共享状态
  • 📈 从手动类型 → 自动类型推导

生态系统：

  • 🔧 Vite提供极速开发体验
  • 🔧 Vue DevTools增强调试能力
  • 🔧 Nuxt 3提供全栈解决方案
  • 🔧 Quasar/Vuetify提供组件库支持

理解Vue3通信机制的现代化特性，掌握类型安全的开发模式，有助于构建更加健壮、可维护、高性能的现代Vue应用。随着Vue生态系统的不断完善，开发者可以享受到更好的开发体验和更强大的功能支持。