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框架 库和框架的区别 我们所说的前端框架与库的 ...
随机推荐
- Makefile 使用小结
Makefile的基本格式 #目标:依赖(条件) # 命令 #all: add.c sub.c dive.c mul.c main.c # gcc add.c sub.c div.c mul.c ma ...
- android.animation(1) - ValueAnimator的ofInt(), ofFloat(), addUpdateListener(), addListener()(转)
一.概述 long long ago,我写过几篇有关Animation的文章,讲解了传统的alpha.scale.translate.rotate的用法及代码生成方法.其实这三篇文章讲的所有动画效果叫 ...
- CentOS6.4下Docker应用环境的部署配置
http://blog.chinaunix.net/uid-619485-id-4973941.html *********************************************** ...
- spring oauth2相关资料
理解OAuth 2.0 *****http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html Secure REST API with oauth2 ...
- jq判断元素class是否定义了CSS样式
if($("div").attr("class")==null) 如果$("div").attr("class")为空, ...
- ibatis中in语句参数传入方法
第一种:传入参数仅有数组,iterate中不能有数组的属性名 <select id="GetEmailList_Test" resultClass=" ...
- 基于vitamio的网络电视直播源代码
这个项目是基于vitamio的网络电视直播源代码.也是一个使用了vitamio的基于安卓的网络直播项目源代码,可能如今网上已经有非常多类似这种视频播放应用了.只是这个还是相对来说比較完整的,希望这个案 ...
- [Busybox]Busybox制作文件系统
问题: 1.目前busybox和bootstrap两种方案制作文件系统,哪种开发周期更短,更加简单? 2.如果需要在文件系统中添加某个package,要怎么做,如vim/udhcpd等? 转自:htt ...
- Keil的使用方法(汇总)
推荐 分享一个大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到人工智能的队伍中来! http://www.captainbed.net/strongerhuang 软件的开发 ...
- jvm 调整tomcat的堆内存和常驻内存catalina.sh
4.2 性能优化 tomcat性能取决于你的内存大小 上策:优化代码 中策:jvm优化机制 垃圾回收机制 把不需要的内存回收 优化jvm--优化垃圾回收策略 优化catalina.sh配置文件. ...