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框架 库和框架的区别 我们所说的前端框架与库的 ...
随机推荐
- mysql启动错误之mysql启动报1067错误如何解决
MYSQL启动报1067错误,系统日志中是“服务 mysql 意外停止” Mysql日志中则是:Plugin 'FEDERATED' is disabled. 解决方法: 1.在MY.INI文件中的 ...
- 快速过滤出完整的SQL语句
[root@bass ca]# mysqlbinlog -- |egrep -v "^(/|SET|BEGIN|COMMITER|#|COMMIT)" >a.log [roo ...
- Debian7/8安装最新的nginx稳定版本
我们知道,通过 apt-get install nginx 就可以安装上nginx,可惜这样安装的nginx版本都有些旧,就连最新的Debian 8.0 默认安装的仍然是1.6.2,更别说 Debia ...
- jquery 悬浮验证框架 jQuery Validation Engine
中文api 地址 http://code.ciaoca.com/jquery/validation-engine/ 和bootstarp 一起使用不会像easyui 验证那样生硬 修改版 原版 ...
- malloc,我误解你了
malloc用于动态申请内存,这个学过C语言的都知道.忘记了在哪本书上看到,malloc申请的内存不一定是连续,于是一直记住了.这句话有错吗?没有!但是当时只是记住了这个知识点,而没有深入的思考.直到 ...
- Centos7+PHP5.6+MySQL5.7+Zabbix4.0部署
Centos7+PHP5.6+MySQL5.7+Zabbix4.0部署 系统版本:CentOS Linux release 7.4.1708 (Core) 最小化安装 内核版本:3.10.0-693. ...
- [driver]简单地hello驱动加载
转自:http://blog.chinaunix.net/uid-24264134-id-98061.html Linux设备驱动会以内核模块的方式出现,因此,内核模块也成了我们编写驱动的入门知识,这 ...
- ubuntu 安装dlib 出现dlib.so: undefined symbol: png_set_longjmp_fn
参考网上的教程安装dlib 安装教程1 sudo apt-get install libboost-python-dev cmake sudo pip install dlib 安装教程2ubuntu ...
- 24SpringMvc中的重定向和转发-解释return "redirect:/cargo/contractproduct/tocreate.action";
我在做JK项目时发现:我们在增加一个货物时.会先根据提交的Action()进入到一个新增页面 //跳转到新增的页面 @RequestMapping("/cargo/contractprodu ...
- 360破解大赛crackme分析--之3DES解密附加数据
具体的分析这里有.本人仅仅是对这里面有趣的算法进行了一些学习 分析链接 这次是逆向的使用3DES解密的过程中的内容: 使用微软的crypt库 使用3DES解密程序中的附加数据 代码: VOID enc ...