提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、非父子组件传值
二、事件总线
- 2.$attrs / listeners
- VueX是笔者认为最稳定的非父子传值的方法，笔者也会单独写出文章详解
总结

前言

本节紧接这上一篇，说说如何在非父子组件中进行组件之间的传值

一、非父子组件传值

（1）事件总线
（2）$attrs / listeners

二、事件总线

事件总线的原理就是：

创建一个公共的Js文件，让其专门负责传值。就像公共的交通工具bus，data可以乘坐这辆bus到达指定的站台（相应的组件）

那么首先要做的就是在我们的项目中创造这辆bus

1.闭门造车（创建公用JS文件）

首先得在城市中（src目录下）租块地（创建一个文件夹），放置这辆bus。
bus.js的创建十分简单，只要粘贴以下代码：

import Vue from 'vue';
export default new Vue;

当然造车的方法有很多种，笔者只想给你最便捷的一种。

2.上车

既然坐车就要刷卡，刷卡的方式也很简单，在需要传递数据的组件中引入bus.js

import bus from './bus.js'

之后bus出发，在该组件中发射事件，发射事件需要一个媒介，在本篇就用button的click事件触发：

<button @click="appmsg">bus传递data</button>

在methods中定义事件：

 methods:{appmsg(){bus.$emit('getonbus','App')}}

上车出发过程完成

3.下车

下车也要刷卡，方式相同，在需要接收数据的组件中引入bus.js

import bus from './bus.js'

在示例中提前定义了一个变量value

data(){return{value:"Home"}}

到站接收数据，在接收组件的mounted中接收，代码如下：

mounted(){bus.$on('getonbus', val => {this.value = val})}

至此我们已经完成了数据的传输，我们来看看效果：
html代码：

<p>{{value}}</p>

效果：
点击前：

点击后：

这确实是一个十分方便的方法，但是：
事件总线方式传递数据同时需要及时的移除事件监听，这对于初学者是个麻烦事，因此
换种方法往下看吧，哈哈

2.$attrs / listeners

这种传值方式主要是用于多级组件的传值，其实还是得保持一种“血脉联系”
例如爷爷组件给孙子组件传值，当然这借助简单的v-bind也是可以实现的，但是如果我们就是想跳过父组件就可以用这种方式；

在示例中的组件关系如下：Home(爷爷)>parent(父亲)>child(孩子)
在Home中定义数据，并传入parent：

<template><div class="home"><p>{{value}}</p><parent :msga="a" :msgb="b" :msgc ="c"></parent></div>
</template><script>
import parent from './parent.vue'
export default {name: 'home',components: {parent},data(){return{value:"Home",a:"aaa",b:"bbb",c:"ccc"}}
}
</script>

在父组件中需要定义一个v-bind

<template><div><child v-bind="$attrs"></child></div>
</template>

在孙子组件中打印$attrs

mounted(){console.log(this.$attrs)}

我们来看打印台结果：

孙子得到了爷爷全部的数据，真正的隔代亲！
$listeners大家自己可以试试，爷爷会直接得到孙子发射的事件。
这种方法可以看成props / $emit的延续版，对比学习，效果更佳

VueX是笔者认为最稳定的非父子传值的方法，笔者也会单独写出文章详解

总结

本篇主要讲解了非父子传值的两种方法，深入浅出，让大家对vue传值有更好的理解。

Vue非父子组件传值相关推荐

关于Vue非父子组件传值
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
Vue非父子组件传值+案例cnode首页
1. 创建公共实例化对象 const bus=new Vue() 2. 在需要发送数据的组件中绑定事件使用 bus.$emit发送数据 <button @click="send&q ...
[Vue]非父子组件传值(bus/总线/观察者模式/发布订阅模式)
核心: 在vue原型中挂载vue实例通过this.bus.$emit('事件名', '参数')向外触发事件和传递参数在生命周期函数mounted中,通过this.bus.$on('传递出来的事件名 ...
VUE非父子组件通信
非父子组件通信 vue非父子组件传值方式,本文章整理了两种方式:vuex和总线bus.vuex相比于总线bus来说非常的稳定,推荐直接使用vuex. 我看其他的文章基本上是[点击导航栏回退的时候,去获 ...
vue中非父子组件传值
vue中非父子组件传值我们使用 $emit发送数据使用 $on监听数据vue非父子组件传值1 创建公共实例化对象const bus=new Vue()2 在需要发送数据的组件中自定义方法使用bus ...
vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
vue学习【非父子组件传值问题（Bus/总线/观察者模式）】
如果两个组件是父子关系,就可以通过props的方式传值. 父组件通过props向子组件传值,子组件通过事件触发向父组件传值那么如果两个组件之间不具备父子关系,该如何传值呢?任何一个网页都可以拆分成几 ...
Vue.js组件-组件通信-非父子组件传值以及其他通信方式
非父子组件传值非父子组件指的是兄弟组件或完全无关的两个组件兄弟组件兄弟组件可以通过父组件进行数据中转,简单来讲,A是父组件,BC是两个兄弟组,那么我们可以先B传给A,再A传给C.示例如图: Ev ...

Vue非父子组件传值