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

迈不过友情╰ 2022-06-09 10:54 255阅读 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 条评论，255人围观）

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

相关阅读

相关非父子组件通信的方法

聚沙成塔·每天进步一点点本文内容 ⭐ 专栏简介 1. 中央事件总线 (EventBus) 发送事件的组件：

￡神魔★判官ぃ/ 2024年02月06日 00:21/ 0 赞/ 46 阅读

相关 vue父子组件通信

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

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

相关 Vue 父子组件的通信

Vue 父子组件的通信 vue中页面又一个个组件组成,小组件组成大组件,那么很多时候,我们都需要让父子组件进行传值一、父组件传值给子组件准备工作

我就是我/ 2022年12月10日 14:51/ 0 赞/ 276 阅读

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

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

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

相关 vue2.0父子组件以及非父子组件如何通信

1.父组件传递数据给子组件父组件数据如何传递给子组件呢？可以通过props属性来实现父组件： <parent> <child :child

你的名字/ 2022年06月17日 05:45/ 0 赞/ 252 阅读

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

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

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

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

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

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

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

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

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

相关 vue 父子组件通信

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

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

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

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

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