Vue3组件通讯六种方式

Question

如题所述

Answer 1

目前最常用是 props/$emit 和 vuex/pinia ,接下来是 provide/inject ,其他不建议使用;
实际项目中，简单父子组件传递采用 props/$emit ，涉及全局共享的数据一般采用 vuex/pinia 结合存储对象 localStorage/sessionStorage 使用

静态prop

动态prop

传递对象所有property

类型检查校验

子组件通过自定义事件传递给父组件

子组件

vuex 是针对vue的一个状态管理插件，vue3 匹配vuex4，vue2匹配vuex 3的版本，包含六个核心概念： state getter mutations actions modules

1.定义state数据

3.组件使用

Pinia 是 Vue 的存储库，也是为了实现跨组件/页面共享状态，但是Pinia 提供了一个更简单的 API，具有更少的仪式，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持；

1.创建Pinia实例

3.在组件/页面中使用

主要适合父子组件，父和子孙组件通讯, 可以看作是 长距离的 prop ，支持在setup()中使用

使用inject

当需要支持响应式注入，只需要在provide值使用ref 或着reactive

子组件：

$attrs 方式：

如果这个组件接收一个 id attribute 和一个 v-on:close 监听器，那么 $attrs 对象现在将如下所示:

Vue2.x 使用 EventBus 事件总线进行兄弟组件通信，而在Vue3中事件总线模式已经被移除，官方建议使用外部的、实现了事件触发器接口的库,例如 mitt 或 tiny-emitter