vue兄弟组件通信问题:$emit和$on

简介: vue兄弟组件通信:$emit和$on

timg

在前端,不管我们做什么样的业务和功能,都不会离开页面之间的通信问题,在pc端是这样,在移动端更需要解决页面之间的通信问题。
今天我们来看看Vue的通信方法一----事件总线。在简单的场景下,可以使用一个空的 Vue 实例作为事件总线,具体的官方文档可看非父子组件通信 。官方文档很简洁,但是像我这种菜鸟看的是一脸懵逼,官方的例子也没有(估计是认为太简单了🤣),最后自己慢慢摸索,实践,感觉事件总线还是挺好用的。
首先看一下基本的目录结构:

image

首先声明一下,components下面的三个组件互相之间并没有什么关系,强调一下没有任何关系,不要把他们当成兄弟组件关系,仅仅是放到同一个目录下而已。事件总线实际就是一个new出来的空的vue实例,就是目录中的 eventBus.js ,其内容是

image

不懂的就把他看成是中介公司,通过它达到你和用人单位之间的合作(通信),然后在每个组件引用它就🆗了。
先来看一下我们的donghua组件内容,直接上图

image

v-show是用来控制显示或隐藏的,其实它控制的是display,vue的特点之一就是组件化,即可重用,可以被别的组件嵌套(即组件套组件的方式)。但是想要随时使用某个组件时,以上红箭头的三步是必备的步骤,缺一不可,即第一步导入组件的资源文件import xx,第二步,在components中注册导入的组件,最后将注册的组件当自定义的标签一样在模板中使用,注意一定得放到thirdchild这个div的里面,不能与其同级,因为一个模板有且仅有一个根节点,并且自定义的标签名要与注册的组件名一样,其实在components注册的组件是简化了的,实际是

image

当导入的组件名和标签名一样时可以简写(即只写一个),当然标签名<firtst></first>也是可以改的,但是得要与components中键值对中的key(健名)相同即可,实际上key就是我们自定义的名字(标签名),健值就是组件名。
fisrtchild组件的内容为

image

为了显眼点,我给donghua组件的边框为红色,firstchild组件的边框为蓝色,现在donghua组件的现象是

image

现在我们给donghua组件一个点击事件并把消息“hello guo”带到firstchild组件并显示出来

image
运用bus的前提是你已经引进来了这个文件

image

然后我们在firstchild那边接收并显示

image

注意$emit和$on发送和接收的事件名必须一致,本次事件名是event,然后回调函数对接收的数据进行处理(可以直接操作data里面的数据),还要注意下this对象,即上下文的内容(黄色的框),我们来看一下结果

image

“hello guo”就出现了,但这不是兄弟组件的传值,donghuafirstchild属于父子组件,因为firstchild是以标签的形式嵌入donghua组件中的,我们再来写一个second组件,边框为绿色。

image

然后我们再donghua组件中注册它

image

现在firstchildsecond就是兄弟组件的关系了,现在我们来传值,在firstchild组件将“欢迎来到gsben的博客”信息发给second的组件并让其显示出来,firstchild的内容是

image

我们现在再来看看donghua组件

image

当我们点击firstchild组件传值按钮后,

image

会发现,接收值从world变成了我们传的值“欢迎来到gsben的博客”,这样兄弟组件的也成功了。

但是,作为一个小白,这过程肯定会遇到问题的(可能我的领悟能力太差),下面是我曾经遇到的困难,纠结等的总结,想给大家分享一波。

第一:要弄清楚兄弟组件中组件之间的关系,并不是在同一个目录长得都差不多就是兄弟组件关系,只有两个组件在同一div(容器)内,才算是兄弟关系,当然组件可以套子组件,子组件还可以在套子组件,就是可以有多层关系(父子,兄弟,祖孙...),注意组件使用的三部曲。

第二:并不一定得把所有组件都放到app.vue中,app.vue是一个根节点,也是一个单页面内容的展示区。一般只会把公共的部分放到app.vue中,只要放到app.vue中的东西,不管是html标签还是组件,在最开始加载时都会将他们显示出来。所以一般除了公共的内容放到app.vue中,其他的都会放到组件中,然后在配置路由,让一加载,就自动到指定的路由所对应的组件上,如上面的例子

image

你也可以让加载后只显示一个组件,而不是三个组件,让人感觉就像是页面跳转了一样,换了一个页面似的。我上面用的是v-show 你也可以用绑定类class的方法来控制。

第三:深刻理解单页面。vue的整个应用其实就是一个页面,只是配置了不同是路由,然后跳转到不同的组件,有的甚至不需要配置路由,直接将很多内容或者组件放在一个div中,然后控制他们的显示或是隐藏就可以了,点击一下,就换一个页面,看起来是跳转了页面(实际上只是改变了下组件的隐藏而已,其实你也可以看到它跳转的时候或是更换页面的时候,其实url并没有改变)。

我记得官方文档说过,你的页面不是很多,业务逻辑也不是很复杂时,事件总线是一个很好的解决页面通信的方法,其不仅在于兄弟组件能通信,也可跨组件通信,本次实践内容就是这样。最后一句,实践是检验真理的唯一标准!

以上就是本章的内容,有点啰嗦,但是是我做兄弟组件通信时的“心里路程”,欢迎吐槽,本节代码事件总线。最近在看vue作者力荐的一本书Vue.js实战,很nice,里面讲得非常详细,感兴趣的小伙伴可以看看。

目录
相关文章
|
7天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
7天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
7天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
13天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
1天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
15 7
|
1天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
13天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
13天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
13天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
12天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉