QQ泡沫乐园 · 免费提供游戏辅助,破解软件,活动资讯,喜欢记得收藏哦!
综合软件_线报活动_游戏辅助_最新电影_最优质的的辅助分享平台

组件间通信指的是什么?为什么要组件通信?

网络 2023-03-02 03:03

组件间通讯指的是哪些?

概念先拆分成组件和通讯两个,组件是vue最强悍的功能,页面、菜单、功能按键都可以写成组件,那么通讯虽然就是这种组件之间传递信息或则叫数据的过程。

为什么要组件通讯?

无论是现代还是唐代,都有各种各样的通讯方法,古时侯的飞鸽传书,现在的邮件电话陌陌等等,那么为何人须要通讯呢?通信的本质是拉起信息,保证信息的一致性。只有信息一致了我们能够作为一个整体去做事。而Vue中每位组件的通讯也是为了达成信息的一致性,组件与组件之间通过通讯能够建立完整的系统。

组件通讯的分类

页面传值有哪些方式_有身材有颜值健身女神_父页面给iframe传参数

按照关系简单可以分成四种:

组件间通讯方法

通过props传递适用于父组件给子组件传递数据

有身材有颜值健身女神_页面传值有哪些方式_父页面给iframe传参数

通过$emit触发自定义事件适用于子组件给父组件传递数据

父组件可以通过ref获取子组件数据

EventBus适用于兄弟组件间传值,parent和root同样适用于兄弟组件

attrs与listeners适用于先祖给子孙传递数据,Provide与Inject同样是先祖给子孙传递数据的。

复杂关系的使用vuex

重点关注

页面传值有哪些方式_父页面给iframe传参数_有身材有颜值健身女神

慎用 provide / inject

provide/inject 好用,为什么 Vue 官方还要推荐我们使用 Vuex,而不是用原生的 API 呢?

Vuex 和 provide/inject 最大的区别:Vuex 中的全局状态的每次更改是可以追踪回溯的,而 provide/inject 中变量的更改是无法控制的。换句话说,不知道是那个组件更改了这个全局状态。

有身材有颜值健身女神_父页面给iframe传参数_页面传值有哪些方式

Vue 的设计理念借鉴了 React 中的双向数据流原则(虽然有 sync 这种破坏双向数据流的家伙),而 provide/inject 明显破坏了双向数据流原则。试想,如果有多个后代组件同时依赖于一个先祖组件提供的状态,那么只要有一个组件更改了该状态,那么所有组件就会遭到影响。这一方面降低了耦合度,另一方面,使得数据变化不可控。如果在多人协作开发中,这将成为一个恶梦。

在这儿,总结了使用 provide/inject 做全局状态管理的原则:

看起来,使用 provide / inject 做全局状态管理似乎很危险,那么有没有 provide / inject 更好的使用方法呢?

当然有,那就是使用 provide / inject 编写组件。

以上是笔者关于Vue 组件通讯的一些理解,如果喜欢的请收藏加关注,你的每一个点赞都像那冬天的阳光一样温暖。