vue中的event bus非父子组件通信解析


Posted in Javascript onOctober 27, 2017

有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的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中的event bus非父子组件通信解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
jquery 表单下所有元素的隐藏
Jul 25 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
openlayers实现图标拖动获取坐标
Sep 25 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 #Javascript
webpack配置之后端渲染详解
Oct 26 #Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 #jQuery
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 #Javascript
node文字生成图片的示例代码
Oct 26 #Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 #Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 #Javascript
You might like
PHP 中的批处理的实现
2007/06/14 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
Django forms组件的使用教程
2018/10/08 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
详解Anaconda 的安装教程
2020/09/23 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
Java程序员面试题
2013/07/15 面试题
采购部经理岗位职责
2014/02/10 职场文书
超市中秋节促销方案
2014/03/21 职场文书
大学生安全责任书
2014/07/25 职场文书
工程催款通知书
2015/04/17 职场文书
使用 Apache 反向代理的设置技巧
2022/01/18 Servers