vue通信
组件实例的作用域是孤立的。
一、父子通信
父组件通过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通信的更多相关文章
- Vue通信、传值的多种方式,详解
Vue通信.传值的多种方式,详解 转自:https://blog.csdn.net/qq_35430000/article/details/79291287 一.通过路由带参数进行传值 ①两个组件 A ...
- Vue通信、传值的多种方式,详解(都是干货)
Vue通信.传值的多种方式,详解(都是干货) 可参考博客: https://blog.csdn.net/qq_35430000/article/details/79291287
- vue 通信:父子通信、兄弟通信、跨多层通信、vuex状态管理
之前简单做了一次vue通信方法的培训,在此记录一下培训的内容. 关于vue通信,大家最先想到的方法应该是props.ref.$emit.$parent,还有vuex,因为这也是我在项目中最常用到的方法 ...
- vue通信之子父组件通信
子父组件通信: 创建一个父组件 Home , 创建一个子组件 Head Home 组件: import Head from "./Head.vue" // 引入 Head 组件 c ...
- vue通信、传值的多种方式(详细)
转载自https://blog.csdn.net/qq_35430000/article/details/79291287
- Vue通信的10种方式
1.10种通信方式 10种:https://juejin.im/post/5bd18c72e51d455e3f6e4334 2.除此之外,还有children和ref. 需要注意 $children ...
- vue通信、传值的方式
原文博主地址:https://blog.csdn.net/qq_35430000/article/details/79291287 看完还是受益匪浅,讲得很详细..感谢!
- angular与vue的应用对比
因为各种笔试面试,最近都没时间做一些值得分享的东西,正好复习一下vue技术栈,与angular做一下对比. angular1就跟vue比略low了. 1.数据绑定 ng1 ng-bind,{{ sco ...
- Vue学习看这篇就够
Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...
随机推荐
- 何时应该使用Directive、Controller、Service?
AngularJS:何时应该使用Directive.Controller.Service? 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可 ...
- ubuntu内部错误的解决办法
在ubuntu使用过程中,出现下面错误: 对不起,Ubuntu 16.04出现了内部错误. 这并不是ubuntu16.04特有的问题,好像每一个ubuntu版本都有类似的问题. 解决的办法有2个. 1 ...
- atitit..sql update语法的词法分析,与语法ast构建
atitit..sql update语法的词法分析,与语法ast构建 1. 要使用sql udpate语法的dsl ,需要写个解释器.. 1 2. 词法分析的实现 1 2.1. 扫描器的实现 SqlU ...
- Objective-c的@property 详解
转自:http://www.cnblogs.com/andyque/archive/2011/08/03/2125728.html 之前很多网友对我翻译的教程中的Property的使用感到有些迷惑不解 ...
- 线程相关函数(7)-sem_post(), sem_wait() 信号量
sem_tsem_initsem_waitsem_trywaitsem_timedwaitsem_postsem_destroy 生产者消费者实例: #include <stdlib.h> ...
- 《Kubernetes与云原生应用》系列之容器设计模式
http://www.infoq.com/cn/articles/kubernetes-and-cloud-native-app-container-design-pattern <Kubern ...
- 李洪强iOS经典面试题36-简单介绍 ARC 以及 ARC 实现的原理
李洪强iOS经典面试题36-简单介绍 ARC 以及 ARC 实现的原理 问题 简单介绍 ARC 以及 ARC 实现的原理. 考查点 ARC 是苹果在 WWDC 2011 提出来的技术,因此很多新入 ...
- Ubuntu下安装RabbbitVCS(图形化svn管理工具)- Ubuntu也有TortoiseSVN
在Windows下用惯了TortoiseSVN这只小乌龟,到了Ubuntu下很不习惯命令行的SVN,于是经过一番寻找安装了RabbitVCS这款SVN图形化前端工具(官方网站:http://rabbi ...
- linux 技巧:使用 screen 管理你的远程会话(短时间内同时开启多个会话)
screen -S zyj 开启一个会话窗口 会进入这个页面 然后按 Ctrl+a,再按一下d 退出 然后输入 screen -r -d zyj 会从新进入这个页面 如果你的工作完成就直接输入 关 ...
- dbcp 详细配置
1.配置参数 username : 连接用户名 password: 连接密码 url : 连接 url( 如果连接 mysql ,格式为 jdbc:mysql://ip:port/dbname) ...