vue小弟组件通信-事件车

今天给大家介绍一种vue小弟组件之间的通信方式-事件车。事件车的基本原理是在本项目的Vue原型对象中生成一个新的Vue对象，负责兄弟组件之间的通信。我会通过一个赛事经理来简单介绍一下赛事车的原??理。1.首先在components文件夹下创建一个子组件Input.vue，里面有一个输入框和一个添加事件的按钮。然后在数据中声明变量事件和输入框的双向绑定，在按钮上绑定点击事件addEvent，通过打印事件暂时检查功能是否完成。此时的页面及其打印效果是这样的：此时说明Input.vue中的数据和方法都正常了。2、接下来我们在components中新建一个list.vue，用来存放在Input.vue中输入的to-do事件。这时候可以在里面写一些假数据，比如在data里面写一个events数组，然后在div里面渲染。代码如下：3.合并输入。vue和List.vue引入了Home.vue，代码如下：this当页面渲染成这样：4.接下来就是今天的主角登场了。我们首先需要在main.js中生成一个新的Vue对象。我在这里将其命名为$bus并在main.js中添加以下代码：Vue.prototype.$bus=newVue();这句话的意思是在本项目的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中创建（或挂载）的生命周期函数中使用$bus.$on()函数接收来自Input.vue的数据并插入到events数组中。$on函数的两个参数分别是传入的事件名sendEvent和接收事件名对应数据的回调函数。代码如下：created(){this.$bus.$on("sendEvent",(data)=>{console.log("Datareceived");this.events.push(data);});}然后看效果：这里我们添加学习和听音乐，添加成功。添加成功。至此，这个简单的小功能就实现了。您还可以添加删除功能或其他功能来改进它。我希望这篇文章能立即对您有所帮助。*由于Sifu编译器问题，部分地方的“$”符号编译不完美。