有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的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. nginx tomcat session丢失的问题

    nginx反向代理tomcat,出现seesion获取不到的问题. 网上搜索到的解决方案大多是集群tomcat共享session共享的问题,但我这个只有一台tomcat服务器,不涉及到服务器集群问题. ...

  2. [转]精通JS正则表达式

    原文路径:http://www.jb51.net/article/25313.htm 正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式 ...

  3. 关于ruby重构的过程中去除不必要的format

    (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) #这段话可以由下面的话替代56     respond_to do |format|57       ...

  4. Oracle 中 for update 和 for update nowait 的区别

    原文出处http://bijian1013.iteye.com/blog/1895412 一.for update 和 for update nowait 的区别 首先一点,如果只是select 的话 ...

  5. 【转】Adnroid4.0 签名混淆打包(conversion to dalvik format failed with error 1)

    原文网址:http://jojol-zhou.iteye.com/blog/1220541 自己的解决方法:关闭Eclipse,再开启Eclipse就可以. 最新Eclipse3.7+android ...

  6. 表达式:使用API创建表达式树(3)

    一.DebugInfoExpression:发出或清除调试信息的序列点. 这允许调试器在调试时突出显示正确的源代码. static void Main(string[] args) { var asm ...

  7. 《think in python》学习-9

    think in python think in python -9 案例分析:文字游戏 从文本文件中读取文字 作者提供了一个文本文件words.txt 地址 本章后面案例也会用带该文件中的词组 fi ...

  8. win10+cpu+tensorflow+pycharm

    1.安装64位的python3.5 选择windowsx86-64 executable installer安装 2.安装tensorflow cmd->进入到安装python的Scripts文 ...

  9. [bzoj3123] [SDOI2013]森林 主席树+启发式合并+LCT

    Description Input 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20. 第二行包含三个整数N,M,T,分别表示节点数.初始边数.操作数 ...

  10. python-Unix套接字

    #!/usr/bin/python #coding=utf-8 #server import socket import sys import os server_address = './test' ...