这次给大家带来event bus非父子组件怎样相互通信，event bus非父子组件相互通信的注意事项有哪些，下面就是实战案例，一起来看一下。
有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的Vue实例作为中央事件总线：
var bus = new Vue()// 触发组件 A 中的事件bus.$emit('id-selected', 1)// 在组件 B 创建的钩子中监听事件bus.$on('id-selected', function (id) { // ...})
登录后复制
在更多复杂的情况下，你应该考虑使用专门的 状态管理模式.就是用到了vuex
eventBus是作为兄弟关系的组件之间的通讯中介。
代码示例：
eventBus todo app
var eventHub = new Vue( {data(){return{todos:['A','B','C']}},created:function () {this.$on('add', this.addTodo)this.$on('delete', this.deleteTodo)},beforeDestroy:function () {this.$off('add', this.addTodo)this.$off('delete', this.deleteTodo)},methods: {addTodo: function (newTodo) {this.todos.push(newTodo)},deleteTodo: function (i) {this.todos.splice(i,1)}}})var newTodo = {template:``,data(){return{newtodo:''}},methods:{add:function(){eventHub.$emit('add', this.newtodo)this.newtodo = ''}}}var todoList = {template:`
- {{item}}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
JS怎样检测浏览器内的脚本
Popup弹出框绑定添加数据事件（步奏详解）
以上就是event bus非父子组件怎样相互通信的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2771797.html
