有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的Vue实例作为中央事件总线:
var总线=new Vue ()
一个中//触发组件的事件
公共汽车。发出(id-selected, 1)美元//在组件B创建的钩子中监听事件
公共汽车。美元(id-selected,函数(id) {//?
})
在更多复杂的情况下,你应该考虑使用专门的状态管理模式。就是用到了vuex
eventBus是作为兄弟关系的组件之间的通讯中介。
代码示例:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title> eventBus
& lt;脚本src=" http://cdn.jsdelivr.net/vue/1.0.28/vue.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=皌odo-app”比;
& lt; h2> todo app
& lt; new-todo> & lt;/new-todo>
& lt; todo-list> & lt;/todo-list>
& lt;/div>
& lt; script>
var eventHub=new Vue ({
数据(){
返回{
待办事项:[A, B, C的)
}
}，
创建:函数(){
这一点。在美元(‘添加’,this.addTodo)
这一点。在美元(“删除”,this.deleteTodo)
}，
beforeDestroy:函数(){
这一点。美元(‘添加’,this.addTodo)
这一点。美元(“删除”,this.deleteTodo)
}，
方法:{
addTodo:函数(newTodo) {
this.todos.push (newTodo)
}，
deleteTodo:函数(我){
this.todos.splice(我,1)
}
}
})
var newTodo={
模板:“& lt; div> & lt;输入类型=拔谋尽弊远越箆模型=皀ewtodo”/祝辞& lt;按钮@click=疤砑印弊４莂dd & lt;/div>”,
数据(){
返回{
newtodo:“
}
}，
方法:{
添加:函数(){
eventHub。发出(‘添加’,this.newtodo)美元
这一点。newtodo="
}
}
}
var基于={
模板:“& lt; ul> & lt;李v=?指数项)项目”在{{项}}\
& lt;按钮@click=皉m(索引)”祝辞X & lt;/li>\
& lt;/ul>”
数据(){
返回{
项目:eventHub.todos
}
}，
方法:{
rm:函数(我){
eventHub。美元发出(“删除”,我)
}
}
}
应用var=new Vue ({
埃尔:“# todo-app ',
组件:{
newTodo: newTodo,
基于基于网络
}
})
& lt;/script>
& lt;/body>
& lt;/html>
效果图如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
