vue中的event bus非父子组件通信解析
程序员文章站
2022-04-28 23:24:25
有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的vue实例作为*事件总线:
var bus = new vue()
// 触发组件 a 中的事件...
有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的vue实例作为*事件总线:
var bus = new vue() // 触发组件 a 中的事件 bus.$emit('id-selected', 1) // 在组件 b 创建的钩子中监听事件 bus.$on('id-selected', function (id) { // ... })
在更多复杂的情况下,你应该考虑使用专门的 .就是用到了vuex
eventbus是作为兄弟关系的组件之间的通讯中介。
代码示例:
<!doctype html> <html> <head> <title>eventbus</title> <script src="http://cdn.jsdelivr.net/vue/1.0.28/vue.min.js"></script> </head> <body> <div id="todo-app"> <h1>todo app</h1> <new-todo></new-todo> <todo-list></todo-list> </div> <script> 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:`<div><input type="text" autofocus v-model="newtodo"/><button @click="add">add</button></div>`, data(){ return{ newtodo:'' } }, methods:{ add:function(){ eventhub.$emit('add', this.newtodo) this.newtodo = '' } } } var todolist = { template:`<ul><li v-for="(index,item) in items">{{item}} \ <button @click="rm(index)">x</button></li> \ </ul>`, data(){ return{ items:eventhub.todos } }, methods:{ rm:function(i){ eventhub.$emit('delete',i) } } } var app= new vue({ el:'#todo-app', components:{ newtodo:newtodo, todolist:todolist } }) </script> </body> </html>
效果图如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 如何烹制山药炒肉才好吃
下一篇: 基于vue.js快速搭建图书管理平台