vue2.0父子组件通信以及同级组件通信
1.父向子通信
父组件为singer.vue.子组件为list-view.vue.需要把歌手的数据传给子组件。则绑定 :data = 'singers' ,singers为父组件的值。data为子组件接收值的名称

子组件采用props的方式接收、data 里面就是父组件传过来的的值了。

值得注意的是。当定义子组件的值有参数时,props里面的default需要向data函数一样写

2 子组件向父组件派发事件
(1)子组件做了一个点击事件 selectItem(item),并传递了一个值

(2)methods里面。这个事件采用$emit的方式传给父组件,并把值也传出去

(3)然后父组件@select="selectSinger"这样来接收子组件派发来的事件里面默认带传过来的参数

(4)然后父组件的methods里面就可以写这个事件具体用来做什么的了。并且其参数 也能用

3 兄弟组件互相通信
兄弟组件顾名思义就是两个同级组件。有时候也需要通信。那么简单的我们可以这样来操作
比如文中这样,button和nav分别为不同的组件,需要 点击button的时候,切换展示与隐藏nav。
那么我们就要用到兄弟组件通信来操作


(1)首先,需要创建一个单独的空.js文件。比如 这样
注册一个空的 Vue 实例,作为 ‘中转站’

(2)在btn按钮上绑定一个点击事件

(3)那么我们就可以在事件里面来写这个事件。 当然在写之前要先引入这个’ 中转站‘

(4)
在需要接收这个事件的nav组件
我们可以这样操作。也是需要 先引入那个‘中转站’eventBus.然后接收事件。注意此操作是在mounted(){}这个生命周期里进行的。

vue2.0父子组件通信以及同级组件通信的更多相关文章
- vue2.0 父子组件之间的通信问题
概要: 父组件向子组件通信:props属性 子组件向父组件通信:$emit()触发事件,$on()监听事件 在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事 ...
- vue2.0 父子组件数据传递prop
vue的一个核心概念就是组件,而组件实例的作用域是孤立的,所以组件之间是不能直接引用其他组件的数据的.极端点举例来说,就是可以在同一个项目中,每一个组件内都可以定义相同名称的数据. data () { ...
- vue2.0父子组件通信的方法
vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传 ...
- vue2.0父子组件以及非父子组件通信传参详解
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue2.0父子组件之间通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
- vue2.0 父子组件通信 兄弟组件通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
- vue2.0父子组件以及非父子组件通信
官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...
- Vue2.0父子组件间事件派发机制
从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会 ...
- Vue2.0父子组件之间和兄弟组件之间的数据交互
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
随机推荐
- Java并发编程实战 第5章 构建基础模块
同步容器类 Vector和HashTable和Collections.synchronizedXXX 都是使用监视器模式实现的. 暂且不考虑性能问题,使用同步容器类要注意: 只能保证单个操作的同步. ...
- squid之------常用配置及选项
Squid常用命令 1.初始化在squid.conf里配置的cache目录 squid -z 2.对squid.conf排错,即验证squid.conf的语法和配置 squid -k parse 3. ...
- 【洛谷P1730】最小密度路径
题目大意:给定一个 N 个点,M 条边的有向图,现有 Q 个询问,每次询问 X 到 Y 的最小密度路径是多少.最小密度路径的定义是路径长度除以路径边数. 题解:利用矩阵乘法,可以预处理出从 X 到 Y ...
- golang初识 和 变量,常量,iota
目录 一.go语言与python 1. go语言 2. python 二.变量相关 1. go语言的基本语法 2. 标识符和关键字 3. 变量声明 (1)声明变量时未指定初始值 (2)声明变量时指定初 ...
- apk反编译(仅供娱乐)
第一个文件夹里面放apk,第二个解析classes.dex,第三个查看java代码,下面三个apktool用来解析apk文件, 记得在环境变量中配置apktool,路径为apktool所在路径 1.解 ...
- [模板][HDU]P2544[单源最短路][SPFA]
题目就不放了,主要是写一下SPFA,很少写,今天特别学了一个用STL的队列来做的. 代码: #include<iostream> #include<cstdio> #inclu ...
- 【CF1250G】Discarding Game(DP)
题意:A和B玩游戏,一共n轮,A先B后,第i轮两人分别能得到a[i]和b[i]的得分,累加到当前得分和中 每一轮进行完之后A可以选择抵消得分,即两者都减去两者的min 若某个时刻某个人得分和不小于K则 ...
- windows 安装 Mongodb 数据库及操作图形化软件 Robo 3T
1 下载系统对应的正确 Mongodb 和 Robo 3T 版本 2 选中 Mongodb 需要安装的路径(后续会使用路径) 3 启动 Mongodb 服务器(到安装相关的路径) 可以参考 菜鸟教程 ...
- Android中实现双击(多击)事件
要实现双击,你需要保存第一次点击时的时间,需要使用到变量,之后便是与第二次点击时的时间比较,看时间间隔是否在你设定的时间内(比如500ms). ? 1 2 3 4 5 6 7 8 9 10 11 12 ...
- Selenium 三种等待方式详解
我们在做WEB自动化时,一般要等待页面元素加载完成后,才能执行操作,否则会报找不到元素的错误,这样就要求我们在有些场景下加等待时间. 我们平常用到的有三种等待方式: 强制等待 隐式等待 显示等待 一. ...