组件实例的作用域是孤立的。

一、父子通信

  父组件通过props向下传递数据给子组件,子组件通过events给父组件发送消息。

  要让子组件使用父组件的数据,我们需要通过子组件的props选项。prop是单向绑定的,父组件属性变化时,将传递给子组件,但是不会反过来。

  子组件想要和父组件通信,需要用到vue的自定义事件系统。使用$on(eventName)监听事件,使用$emit(eventName)触发事件。父组件在使用子组件的地方直接用v-on来监听子组件触发的事件。

二、兄弟通信(平行通信)

  简单场景可以使用一个空的vue实例操作为中央事件总线:

  

  以上代码明确3点:

  1、在两个组件都能访问到的作用域创建这个空vue实例--bus

  2、在a组件触发,$emit

  3、在b组件创建的created()钩子函数中调用,$on  

  复杂情况应当考虑专门的状态管理模式vuex。

  再举一例:

  

vue通信的更多相关文章

  1. Vue通信、传值的多种方式,详解

    Vue通信.传值的多种方式,详解 转自:https://blog.csdn.net/qq_35430000/article/details/79291287 一.通过路由带参数进行传值 ①两个组件 A ...

  2. Vue通信、传值的多种方式,详解(都是干货)

    Vue通信.传值的多种方式,详解(都是干货) 可参考博客: https://blog.csdn.net/qq_35430000/article/details/79291287

  3. vue 通信:父子通信、兄弟通信、跨多层通信、vuex状态管理

    之前简单做了一次vue通信方法的培训,在此记录一下培训的内容. 关于vue通信,大家最先想到的方法应该是props.ref.$emit.$parent,还有vuex,因为这也是我在项目中最常用到的方法 ...

  4. vue通信之子父组件通信

    子父组件通信: 创建一个父组件 Home , 创建一个子组件 Head Home 组件: import Head from "./Head.vue" // 引入 Head 组件 c ...

  5. vue通信、传值的多种方式(详细)

    转载自https://blog.csdn.net/qq_35430000/article/details/79291287

  6. Vue通信的10种方式

    1.10种通信方式 10种:https://juejin.im/post/5bd18c72e51d455e3f6e4334 2.除此之外,还有children和ref. 需要注意 $children  ...

  7. vue通信、传值的方式

    原文博主地址:https://blog.csdn.net/qq_35430000/article/details/79291287 看完还是受益匪浅,讲得很详细..感谢!

  8. angular与vue的应用对比

    因为各种笔试面试,最近都没时间做一些值得分享的东西,正好复习一下vue技术栈,与angular做一下对比. angular1就跟vue比略low了. 1.数据绑定 ng1 ng-bind,{{ sco ...

  9. Vue学习看这篇就够

    Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...

随机推荐

  1. Selenium 之18 种定位方式

    1 id 定位 driver.find_element_by_id() HTML 规定id 属性在HTML 文档中必须是唯一的.这类似于公民的身份证号,具有很强的唯一性 from selenium i ...

  2. 每日英语:Asia Has World's Biggest Pay Gap, Study Finds

    In Asia, middle managers such as department heads make more than 14 times as much as operational emp ...

  3. js控制伪元素样式

    //获取伪元素// CSS代码 #myId:before { content: "hello world!"; display: block; width: 100px; heig ...

  4. Mac下Selenium无法最大化Chrome解决方案

    在用Selenium做自动化操作时,一般最大化浏览器的代码都是:driver.manage().window().maximize(), 但是在Mac下这样是无法最大化Chrome浏览器的,解决方法: ...

  5. vue 单元测试

    单元测试 配置和工具 任何兼容基于模块的构建系统都可以正常使用,但如果你需要一个具体的建议,可以使用Karma进行自动化测试.它有很多社区版的插件,包括对webpack和browserify的支持. ...

  6. RFID Hacking–资源大合集

    原文: http://www.freebuf.com/news/others/605.html http://www.proxmark.org/forum/index.php RFID破解神器官方论坛 ...

  7. 一款纯css3实现的超炫3D表单

    今天要给大家分享一款纯css3实现的超炫3D表单.该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正.效果非常炫,一起看下效果图: 在线预览   源码下载 实现的代码. html代码 ...

  8. Groovy学习()Groovy是啥?

    Groovy是啥? groovy是英文中的一个单词,有marvelous.wonderful和excellen的意思. groovy是轻量级的,动态的,面向对象的,并且运行在JVM上的. groovy ...

  9. 查看、分析memcached使用状态

    访问量上升,数据库压力大,怎么办?好办法是在中间挡一层缓存!这个缓存要求高效,不能比数据库慢,否则服务质量受影响:如果能把数据用hash打散存储到硬盘,也是可以的,不过在内存越来越便宜的今天,还是使用 ...

  10. 大数据处理-Bloom Filter

    大数据处理--Bloom Filter 布隆过滤器(Bloom Filter)是由巴顿.布隆于一九七零年提出的.它实际上是一个很长的二进制向量和一系列随机映射函数. 如果想判断一个元素是不是在一个集合 ...