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

一、父子通信

  父组件通过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. Makefile 使用小结

    Makefile的基本格式 #目标:依赖(条件) # 命令 #all: add.c sub.c dive.c mul.c main.c # gcc add.c sub.c div.c mul.c ma ...

  2. android.animation(1) - ValueAnimator的ofInt(), ofFloat(), addUpdateListener(), addListener()(转)

    一.概述 long long ago,我写过几篇有关Animation的文章,讲解了传统的alpha.scale.translate.rotate的用法及代码生成方法.其实这三篇文章讲的所有动画效果叫 ...

  3. CentOS6.4下Docker应用环境的部署配置

    http://blog.chinaunix.net/uid-619485-id-4973941.html *********************************************** ...

  4. spring oauth2相关资料

    理解OAuth 2.0  *****http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html Secure REST API with oauth2 ...

  5. jq判断元素class是否定义了CSS样式

    if($("div").attr("class")==null) 如果$("div").attr("class")为空, ...

  6. ibatis中in语句参数传入方法

    第一种:传入参数仅有数组,iterate中不能有数组的属性名       <select id="GetEmailList_Test"  resultClass=" ...

  7. 基于vitamio的网络电视直播源代码

    这个项目是基于vitamio的网络电视直播源代码.也是一个使用了vitamio的基于安卓的网络直播项目源代码,可能如今网上已经有非常多类似这种视频播放应用了.只是这个还是相对来说比較完整的,希望这个案 ...

  8. [Busybox]Busybox制作文件系统

    问题: 1.目前busybox和bootstrap两种方案制作文件系统,哪种开发周期更短,更加简单? 2.如果需要在文件系统中添加某个package,要怎么做,如vim/udhcpd等? 转自:htt ...

  9. Keil的使用方法(汇总)

    推荐 分享一个大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到人工智能的队伍中来! http://www.captainbed.net/strongerhuang 软件的开发 ...

  10. jvm 调整tomcat的堆内存和常驻内存catalina.sh

    4.2 性能优化 tomcat性能取决于你的内存大小 上策:优化代码 中策:jvm优化机制  垃圾回收机制 把不需要的内存回收   优化jvm--优化垃圾回收策略 优化catalina.sh配置文件. ...