Vue3系列 - 组件通信方式

Vue3提供了多种组件间通信的方式，满足不同场景的需求。

主要的组件通信方式：

Props向下传递：父组件通过props向子组件传递数据。

// 子组件定义props
export function defineProps<PropNames extends string = string>(
  props: PropNames[]
): Readonly<{ [key in PropNames]?: any }>

事件向上传递：子组件通过事件向父组件发送消息。

// 子组件定义emits
export function defineEmits<EE extends string = string>(
  emitOptions: EE[]
): EmitFn<EE[]>

// 在setup上下文中使用emit
setup(props, { emit }) {
  emit('update', newValue)
}

v-model双向绑定：在父子组件间建立双向数据绑定。
依赖注入：使用provide和inject在祖先和后代组件间传递数据。

export function provide<T>(key: InjectionKey<T> | string | number, value: T) {
  // ...
}

export function inject<T>(key: InjectionKey<T> | string): T | undefined

事件总线：在Vue3中，可以使用外部的事件库或创建一个空的Vue实例作为事件中心。
Vuex/Pinia状态管理：对于复杂应用，可以使用状态管理库集中管理共享状态。
组合式API：通过setup函数和组合式API，可以更灵活地组织和共享组件逻辑。

export type SetupFunction<
  Props,
  RawBindings = {},
  Emits extends EmitsOptions = {}
> = (
  this: void,
  props: Readonly<Props>,
  ctx: SetupContext<Emits>
) => RawBindings | (() => VNode | null) | void

Refs引用：通过ref属性获取子组件实例，直接调用其方法或访问其数据。

选择合适的通信方式取决于组件间的关系和通信的复杂度，合理使用这些方式可以构建出清晰、可维护的组件架构。