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框架 库和框架的区别 我们所说的前端框架与库的 ...
随机推荐
- redis五种基本数据类型
1.string类:一个key对应一个value(key:value).string类是二进制安全,可以包含任何数据(例如:图片.音乐). 2.hash类:string类型field和value的映射 ...
- s2sh框架整合具体配置-xml方式
s2sh整合之xml方式 说明:本文档所採用的框架版本号为:Struts 2.1.8, Sping2.5.5, Hibernate 3.5.6 1. 须要的jar包: ------------ ...
- iOS字符串安全
iOS字符串安全 一个编译成功的可执行程序,其中已初始化的字符串都是完整可见的. 针对于iOS的Mach-O二进制通常可获得以下几种字符串信息: 资源文件名 可见的函数符号名 SQL语句 format ...
- 基于jQuery页面窗口拖动预览效果
今天给大家分享一款基于Query页面窗口拖动预览效果.这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效.这款实例适用浏览器:IE8.360.FireFox.Chrome.Sa ...
- Redis简单介绍
redis简单介绍 Redis VS key-value缓存产品 Redis支持数据的持久化,能够将内存中的数据保持在磁盘中,重新启动的时候能够再次载入进行使用. Redis不只支持简单的key-va ...
- [i.MX6q]i.MX6q处理器,linux操作系统平台搭建 从SD卡启动系统
转自:http://www.07net01.com/linux/2016/02/1232094.html 参照1:http://blog.csdn.net/girlkoo/article/detail ...
- 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 ...
- TCP状态图
TCP建立关闭连接状态图 MSL:Max segment lifetime最大段存活时间. MSL在RFC1122中规定为两分钟,但是各个操作系统的实现不同,在linux上一般配置MSL???? 处于 ...
- 示例 - 向百度说 Hello world! 并获得回应.
1. 让浏览器打开www.baidu.com, 并等待页面加载完毕: Default.Navigate("http://www.baidu.com"); Default.Ready ...
- sql row_number 用法
自己研究了一下RowNum ,发现这样的分页挺清晰的 --第几页,一页多少行declare @PageIndex int,@PageMax intset @PageIndex =1set @PageM ...