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

一、父子通信

  父组件通过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. redis五种基本数据类型

    1.string类:一个key对应一个value(key:value).string类是二进制安全,可以包含任何数据(例如:图片.音乐). 2.hash类:string类型field和value的映射 ...

  2. s2sh框架整合具体配置-xml方式

    s2sh整合之xml方式 说明:本文档所採用的框架版本号为:Struts 2.1.8, Sping2.5.5,  Hibernate 3.5.6 1.    须要的jar包: ------------ ...

  3. iOS字符串安全

    iOS字符串安全 一个编译成功的可执行程序,其中已初始化的字符串都是完整可见的. 针对于iOS的Mach-O二进制通常可获得以下几种字符串信息: 资源文件名 可见的函数符号名 SQL语句 format ...

  4. 基于jQuery页面窗口拖动预览效果

    今天给大家分享一款基于Query页面窗口拖动预览效果.这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效.这款实例适用浏览器:IE8.360.FireFox.Chrome.Sa ...

  5. Redis简单介绍

    redis简单介绍 Redis VS key-value缓存产品 Redis支持数据的持久化,能够将内存中的数据保持在磁盘中,重新启动的时候能够再次载入进行使用. Redis不只支持简单的key-va ...

  6. [i.MX6q]i.MX6q处理器,linux操作系统平台搭建 从SD卡启动系统

    转自:http://www.07net01.com/linux/2016/02/1232094.html 参照1:http://blog.csdn.net/girlkoo/article/detail ...

  7. js、jquery遍历对象

    js遍历对象: var obj = {a:1,b:2,c:3} for(var s in obj){ alert(obj[s]); } jquery遍历对象: var obj = {a:1,b:2,c ...

  8. TCP状态图

    TCP建立关闭连接状态图 MSL:Max segment lifetime最大段存活时间. MSL在RFC1122中规定为两分钟,但是各个操作系统的实现不同,在linux上一般配置MSL???? 处于 ...

  9. 示例 - 向百度说 Hello world! 并获得回应.

    1. 让浏览器打开www.baidu.com, 并等待页面加载完毕: Default.Navigate("http://www.baidu.com"); Default.Ready ...

  10. sql row_number 用法

    自己研究了一下RowNum ,发现这样的分页挺清晰的 --第几页,一页多少行declare @PageIndex int,@PageMax intset @PageIndex =1set @PageM ...