Vue3组件通讯六种方式
最新回答
枯墨云
2024-05-12 00:13:55
实际项目中，简单父子组件传递采用 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
热门标签
