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

一、父子通信

  父组件通过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. 响应式布局框架 Pure-CSS 5.0 示例中文版-中

    8. 表单 Form 在 form 标签中添加 .pure-form 类,可生成单行表单(inline) 效果图: 代码: <form class="pure-form"&g ...

  2. Ubuntu14.04.3 64位环境下openjdk7编译

    系统环境:Ubuntu14.04.3 -amd64 in VMWare1.安装openjdk7依赖 sudo apt- sudo apt--jdk sudo apt-get install build ...

  3. 封装locaostorage

    const ls = localStorage export default { setItem(name, value) { ls.setItem(name, JSON.stringify(valu ...

  4. Activiti工作流简单入门 (zhuan)

    https://my.oschina.NET/Barudisshu/blog/309721 *********************************************** 摘要: 自j ...

  5. Ecshop安装的坑,建议不要使用!

    最近因为工作的需要,安装了下ecshop,这个曾经的火爆开源程序,现在也呈现出疲态. 1.请看官方的运行环境推荐: 服务器端运行环境推荐·php版本5.0以上5.3以下的版本(推荐使用5.2系列版本) ...

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

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

  7. response.setHeader各种用法

    一秒刷新页面一次 response.setHeader("refresh","1"); 二秒跳到其他页面 (登陆跳转) response.setHeader(& ...

  8. QT在CT上的安装及运行

    http://www.cubie.cc/forum.php?mod=viewthread&tid=2662&highlight=qt

  9. linux - fpga-framebuff驱动

    * linux/drivers/video/fpga_fb.c --fpga graphics adaptor frame buffer device *  Created 16 Sep2011 *  ...

  10. CSS——div居中,window.open(0

    margin:0 auto 表示什么意思?? margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right因为0 auto,表示上下边界为0,左右则根据宽度自适 ...