有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的Vue实例作为中央事件总线：

有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的 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非父子组件间通信的更多相关文章

  1. Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题

    1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法    父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...

  2. vue之父子组件间通信实例讲解(props、$ref、$emit)

       组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...

  3. Vue—非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue非父子组件间传参问题

    最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...

  5. 【vue】父子组件间通信----传值

    官方文档参考 (一)父组件 向 子组件 传值 ①在父组件中调用子组件处,绑定要传的数据data1, 如 <nav  :data1=" "  ></nav> ...

  6. 【vue】父子组件间通信----传函数

    (一)子组件 调用 父组件 方法 方式一) 子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child&g ...

  7. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

  8. Vue 非父子组件通信方案

    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...

  9. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

随机推荐

  1. Python 获取当前路径的方法

    Python2.7 中获取路径的各种方法 sys.path 模块搜索路径的字符串列表.由环境变量PYTHONPATH初始化得到. sys.path[0]是调用Python解释器的当前脚本所在的目录. ...

  2. 【RegExp】JavaScript中正则表达式判断匹配规则以及常用方法

    字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在. 正则表达式是一种用来匹配字符串的强有力的武器.它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符 ...

  3. 表达式求值（二叉树方法/C++语言描述）（五）

    本例中的二叉树图是使用Graphviz绘制的(Graphviz官网),在Ubuntu Linux下可以使用apt-get命令安装它: sudo apt-get install graphviz 表达式 ...

  4. 用 Node.js 把玩一番 Alfred Workflow

    插件地址(集成Github.掘金.知乎.淘宝等搜索) 作为 Mac 上常年位居神器榜第一位的软件来说,Alfred 给我们带来的便利是不言而喻的,其中 workflow(工作流) 功不可没,在它上面可 ...

  5. windows下Ubuntu虚拟机联网配置 + Ubuntu虚拟机代理配置

    Ubuntu虚拟机网络连接方式设置: http://blog.csdn.net/u013052460/article/details/50039937 or http://www.gezila.com ...

  6. HTML <img>标签 创建图像映射

    初级前端一枚 下面代码是在图片上创建图像映射 自己整理了下 做个笔记 希望也可以帮助后来学习的朋友! <map name="planetmap"> <area s ...

  7. 70. Climbing Stairs【leetcode】递归，动态规划，java，算法

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  8. 开源社交系统ThinkSNS+ V0.8.0 正式发布（一期功能版本）

    智士软件旗下开源sns社交系统ThinkSNS即将进入10周年,推出并行两代系统ThinkSNSV4和ThinkSNS+,以专业易用的技术源码输出,驱动互联网社交软件建设及创业,使用ThinkSNS改 ...

  9. SQL 三种基本Join

    Join是关系型数据库系统的重要操作之一,SQL常用Join:内联接.外联接和交叉联接等. 这里讨论一下这常用的三种连接. 测试环境:db2 v10.1, linux 表定义: --用户 CREATE ...

  10. JavaScript中的不同逻辑算法结合操作解决实际多重问题以及常用函数类型

    数组去重+快速排序 //老数组var arr1 = [1,2,2,3,8,6,6,4,5,5];//定义新数组var arr2 = [ ];内部可运用布尔型进行判断数组的唯一性 for(i=0;i&l ...