明天给大家介绍一种vue的兄弟组件间通信形式——事件车。

事件车的基本原理就是在本我的项目Vue的原型对象里新生成一个Vue对象专门用来负责兄弟组件间的通信。
我将通过一个事件管理器来简略解说事件车的原理。

1.首先在components文件夹下创立一个子组件Input.vue,其中领有一个输入框和增加事件的按钮。
而后在data里申明变量event与输入框双向绑定，在buttton上绑定点击事件addEvent并临时通过打印event查看性能是否齐备。

<template>    <div>        <input type="text" v-model="event"><button @click="addEvent">增加事件</button>    </div></template><script>export default {    name:"Input",    data(){        return{            event:""        }    },    methods:{        addEvent(){            console.log(this.event);        }    }}</script>

这时的页面及其打印成果是这样的：

此时阐明Input.vue中的数据及办法失常。

2.接下来咱们在components中新建一个list.vue用来寄存Input.vue里输出的代办事件。
此时可写一些假数据在其中，例如在data里写一个events数组，而后在div中渲染进去。
代码如下：

<template>    <div>        <h3 v-for="(item,index) of events" :key="index">{{index+1}}:{{item}}</h3>    </div></template><script>export default {    name:"List",    data(){        return{            events:["吃饭","睡觉"]        }    }}</script>

3.将Input.vue和List.vue引入Home.vue,
代码如下：

<template>  <div class="home">    <h1>事件管理器</h1>    <Input/>    <List/>  </div></template><script>// @ is an alias to /srcimport Input from "@/components/Input"import List from "@/components/List"export default {  name: 'Home',  components: {    Input,    List  }}</script>

此时的页面渲染进去是这样的：

4.接下来就是明天的配角退场了，咱们首先要去main.js里新生成一个Vue对象，我这里取名叫做$bus在main.js内增加如下代码：

Vue.prototype.$bus = new Vue();

这句话的意思是在本我的项目Vue对象的原型对象中新增一个名为$bus的Vue对象，这个新增的原型对象也就是所谓的事件车。
那么咱们如何通过工夫车实现兄弟组件通信呢？很简略。

5.回到Input.vue中，此时咱们在这里调用刚刚定义的addEvent函数，并在该函数里调用$bus.$emit()进行传参，$emit()这个函数大家应该比拟相熟吧，两个参数第一个参数为事件名，第二个参数为须要传递的值。
代码如下：

        addEvent(){            this.$bus.$emit("sendEvent",this.event);            console.log("输出数据已发送");        }

这段代码的意思是通过$bus.$emit()函数来传递用户输出的数据（也就是this.event），在另一个组件里须要用事件名sendEvent来接住该数据。此时的数据曾经发送。

6.最初来到List.vue中的created生命周期函数（也可应用mounted）中应用$bus.$on()函数接住Input.vue里传来的数据并插入到events数组内。$on函数的两个参数别离为传来的事件名sendEvent和一个接住该事件名对应的数据的回调函数。
代码如下：

    created(){        this.$bus.$on("sendEvent",(data)=>{            console.log("已接管到数据");            this.events.push(data);        });    }

而后看成果：
这里咱们增加学习和听音乐，

增加胜利。

增加胜利。

到这里这个简略的小性能就实现了，大家也能够本人增加一个删除性能什么的欠缺一下，心愿本文对你立刻事件车有帮忙。

*因为思否编译器问题局部中央“$”符号未完满编译。