Vue事件总线 evenbus 兄弟组件之间传值

vue传值方式主要有四种

• 1.路由带参数传值
• 2.父子组件之间传值，父传子用props，子传父用emit
• 3.如果是大项目可以使用vuex传值，小项目少页面可以使用evenbus之间进行传值

事件总线之间传值可以分为两种，一种全局事件传值，一种单独设一个js文件进行引用传值

第一种：全局使用，在main.js中用vue的原型对象上添加一个bus方法

Vue.prototype.bus = new Vue()

接着在第一个传值的组件内自定义一个传值方法

<template>
<div id="firstchild">
<h2>firstChild组件</h2>
<button @click="sendMsg">向组件传值</button>
</div>
</template>

<script>
export default {
name: "FirstChild",
methods: {
sendMsg() {
this.bus.$emit('userDefinedEvent','this message is from firstChild')
}
}
}
</script>

<style scoped>

</style>

接着在第二个需要接受的组件内接收

<template>
<div id="secondChild">
<h2>secondChild组件</h2>
<p>从firstChild接收到的信息:{{msg}}</p>
</div>
</template>

<script>
export default {
name: "SecondChild",
data() {
return {
msg: '默认值'
}
},
mounted() {
var self = this;
this.bus.$on('userDefinedEvent',function (msg) {
self.msg = msg;
});
}
}
</script>
<style scoped>

</style>

最后，在App.vue里面使用这两个组件

<template>
<div id="app">
<first-child/>
<second-child/>
</div>
</template>

<script>
import FirstChild from "./FirstChild";
import SecondChild from "./SecondChild";
export default {
name: 'App',
components: {SecondChild, FirstChild},
}
</script>

<style>
// css
</style>

效果自己复制实现

需要注意的是，在全局使用 bus的方法时，要有this指向原型对象，否则会报出bus is not defined 的错误哟

第二种：新建一个bus.js文件， 在这个文件里实例化一下vue；然后在组件A和组件B中分别引入这个bus.js文件，将事件监听和事件触发都挂到bus.js这个实例上，这样就可以实现全局的监听与触发了

新建bus文件,实例化Vue

import Vue from 'vue'
export default new Vue

在组件A里面，引入方法

<template>
<div id="firstchild">
<h2>firstChild组件</h2>
<button @click="sendMsg">向组件传值</button>
</div>
</template>

<script>
import bus from './assets/evenbus'
export default {
name: "FirstChild",
methods: {
sendMsg() {
bus.$emit('userDefinedEvent','this message is from firstChid')
}
}
}
</script>

在组件b内接收方法

<template>
<div id="secondChild">
<h2>secondChild组件</h2>
<p>从firstChild接收到的信息:{{msg}}</p>
</div>
</template>

<script>
export default {
name: "SecondChild",
data() {
return {
msg: '默认值'
}
},
mounted() {
var self = this;
this.bus.$on('userDefinedEvent',function (msg) {
self.msg = msg;
});
}
}
</script>

具体效果复制就有
gg