字节跳动技术整理，Vue中组件最常见通信的方式，看这篇足矣了

那么为什么上面的props和$attrs都是响应式的，连破坏“单向数据流”的.sync修饰符都是响应式的，但到了provide/inject就不是响应式的了呢？在网上找了半天的资料也没有找到确切的答案，本文就此结束。

END

就这么结束了吗？当然没有！在一(zi)个(ji)哥(xue)们(xi)的帮(yuan)助(ma)下，我总算找到了答案。首先我们试想一下，如果有多个子组件同时依赖于一个父组件提供的数据，那么一旦父组件修改了该值，那么所有组件都会受到影响，这是我们不希望看到的；这一方面增加了耦合度，另一方面使得数据变化不可控制。接着看一下vue是怎么来实现provide/inject的。

可以看到初始化provide的时候将父组件的provide挂载到_provided，但它不是一个响应式的对象；然后子组件通过$parent向上查找所有父组件的_provided获取第一个有目标属性的值，然后遍历绑定到子组件上；因为只是初始化的时候绑定的，而且_provided也不是响应式的，所以造成了provide/inject的这种特性。

那么provide/inject这么危险，又不是响应式的，它能拿来做什么呢？打开element-ui的源码搜索provide，我们可以看到非常多的组件使用了provide/inject，我们就拿form、form-item和button举个例子。

form和form-item都可以传入一个属性size来控制子组件的尺寸，但是子组件的位置是不固定的，可能会嵌套了好几层el-row或者el-col，如果一层一层的通过props传size下去会很繁琐，这是provide/inject就派上用处了。

我们通过父组件将elFormItem本身注入到子组件中，子组件通过inject获取父组件本身然后动态地计算buttonSize。

总结：provide/inject能够解决多层组件嵌套传值的问题，但是是非响应的，即provide与inject之间没有绑定，注入的值是在子组件初始化过程中决定的。

EventBus

EventBus我刚开始直接翻译理解为事件车，但比较官方的翻译是事件总线。它的实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案，所有的组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”。

首先创造一个空的vue对象并将其导出，他是一个不具备DOM的组件，它具有的仅仅只是它实例方法而已，因此它非常的轻便。

将其挂载到全局，变成全局的事件总线，这样在组件中就能很方便的调用了。

我们先定义了两个子组件child1和child2，我们希望这两个组件能够直接给对方发送消息。

我们初始化时在child1和child2中分别注册了两个接收事件，然后点击按钮时分别触发这两个自定义的事件，并传入数据，最后两个组件分别能接收到对方发送的消息，最后效果如下：

前面也提到过，如果使用不善，EventBus会是一种灾难，到底是什么样的“灾难”了？大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在页面或组件销毁时，同时移除EventBus事件监听。

总结：EventBus可以用来很方便的实现兄弟组件和跨级组件的通信，但是使用不当时也会带来很多问题；所以适合逻辑并不复杂的小页面，逻辑复杂时还是建议使用vuex。

vuex

在vue组件开发中，经常会遇到需要将当前组件的状态传递给其他非父子组件组件，或者一个状态需要共享给多个组件，这时采用上面的方式就会非常麻烦。vue提供了另一个库vuex来解决数据传递的问题；刚开始上手会感觉vuex非常的麻烦，很多概念也容易混淆，不过不用担心，本文不深入讲解vuex。

vuex实现了单向的数据流，在全局定义了一个State对象用来存储数据，当组件要修改State中的数据时，必须通过Mutation进行操作。

我们首先在全局定义了count.js模块用来存放数据和修改数据的方法，然后在全局引入。

运行结果如下：

我们就可以在任何组件中来调用mutations和actions中的方法操作数据了。vuex在数据传值和操作数据维护起来比较方便，但是有一定的学习成本。

$refs

有时候我们需要在vue中直接来操作DOM元素，比如获取DIV的高度，或者直接调用子组件的一些函数；虽然原生的JS也能获取到，但是vue为我们提供了更方便的一个属性：$refs。如果在普通的DOM元素上使用，获取到的就是DOM元素；如果用在子组件上，获取的就是组件的实例对象。

我们首先创建一个简单的子组件，有两个函数用来增减num的值。

我们给子组件增加一个ref属性child，然后通过$refs.child来获取子组件的实例，通过实例来调用子组件中的函数。

可以看到我们获取到的是一个VueComponent对象，这个对象包括了子组件的所有数据和函数，可以对子组件进行一些操作。

$parent和$children

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

355d0edce85b970db267bd.png)

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-661IUsEg-1712520898864)]