vue非父子组件通信（两个不同的组件通信）

迈不过友情╰ 2022-06-09 10:54 265阅读 0赞

![Center][]

对于刚刚接触vue，还不是很熟悉的朋友，比如我，真的就懵逼了。怎么用？

下面是我自己的实例代码：

这里需要说明一下，我是安装vue脚手架进行开发的，不是直接引入vue.js。

1.首先要建立一个中转站：eventBus.js 建议放在assets文件夹下面，内容很简单，引入vue并且导出即可。

![Center 1][]![Center 2][]

2.第二步，就是在你当前组件，就是需要触发事件的那个组件里面先引入eventBus.js，不引入怎么用呢？

![Center 3][]

接下来就是要在methods里面去触发了。我自己是将它放在函数里，在其他事件中触发它。

![Center 4][]

3.最后一步就比较简单了，在你需要展示效果的另一个组件页面去监听它即可，监听要注意必须在生命周期函数created中。

当然，别忘了引入eventBus.js。

![Center 5][]

好了，内容就这么多，个人感觉已经很清晰了。如果对上面的change有疑问，不用太在意，就是一个触发事件的媒介，你换成点击还是hover都可以。

非父子组件就先这样了，接下来得去学习父子组件了，说出来你不信，我整个项目都没用父子组件传递数据，全程params传参。

[Center]: /images/20220609/c7abac8891e84e34b28369070b54478b.png
[Center 1]: https://img-blog.csdn.net/20170904145104217?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQnJpZ2h0MjAxNw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220609/3282aee14de64c92b31198a7571936e0.png
[Center 3]: /images/20220609/0356ca5dfa364059bf4071b5d91c65c3.png
[Center 4]: /images/20220609/ff8b43273c2946df8c1f68a2a8ec1152.png
[Center 5]: /images/20220609/448bc60e357e40a0a5d10fec0b17820e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，265人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue非父子组件之间的通信

文章目录非父子组件的通信 1.Provide和Inject 1.1基本使用 1

﹏ヽ暗。殇╰゛Y/ 2023年09月28日 15:52/ 0 赞/ 18 阅读

相关 Vue之组件（父子与非父子通信）

组件组织通常一个应用会以一棵嵌套的组件树的形式来组织。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk

悠悠/ 2023年06月11日 12:29/ 0 赞/ 21 阅读

相关 Vue父子组件、子父组件、非父子组件通信

1、父子组件传值通信，在子组件中使用props属性，静态或者动态传递父组件的变量值 <template> <div id="app"> <

红太狼/ 2023年06月06日 03:51/ 0 赞/ 21 阅读

相关 vue父子组件通信

vue 父子组件通信 1.1 父传子 props（组件通信） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sha

我会带着你远行/ 2023年01月15日 03:57/ 0 赞/ 177 阅读

相关 Vue---父子组件通信+子父组件通信+非父子组件通信

父-子组件通信-props 父组件到子组件通信，通过props。子组件在props中定义要传的值，props有两种形式，一种是字符串数组形式，一种是对象形式。前者方

柔情只为你懂/ 2022年11月30日 04:13/ 0 赞/ 335 阅读

相关 vue非父子组件通信（两个不同的组件通信）

![Center][] 对于刚刚接触vue，还不是很熟悉的朋友，比如我，真的就懵逼了。怎么用？下面是我自己的实例代码：这里需要说明一下，我是安装vue脚手架进行开发的

迈不过友情╰/ 2022年06月09日 10:54/ 0 赞/ 266 阅读

相关 vue非父子组件之间的通信

1、创建一个vm.js文件 --保证通信组件是一个vue对象 ![70][] 2、vm.js的内容 / Created by Adminis

喜欢ヅ旅行/ 2022年05月28日 12:55/ 0 赞/ 296 阅读

相关 Vue之非父子组件的通信

新建一个VueEvent.js，创建一个Vue实例充当中间传输媒介 //1.引入Vue import Vue from 'vue' //2.实例化一个

淩亂°似流年/ 2022年04月17日 23:59/ 0 赞/ 283 阅读

相关 vue 父子组件通信

vue 父子组件通信，如下图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

快来打我*/ 2022年01月25日 19:19/ 0 赞/ 482 阅读

相关 Vue非父子组件之间的通信

// 注册一个空的js,作为中转站 bus.js import Vue from 'vue' export default new Vue() A组件：

亦凉/ 2022年01月23日 21:23/ 0 赞/ 364 阅读