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父子组件通信以及同级组件通信的更多相关文章

  1. vue2.0 父子组件之间的通信问题

    概要: 父组件向子组件通信:props属性 子组件向父组件通信:$emit()触发事件,$on()监听事件 在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事 ...

  2. vue2.0 父子组件数据传递prop

    vue的一个核心概念就是组件,而组件实例的作用域是孤立的,所以组件之间是不能直接引用其他组件的数据的.极端点举例来说,就是可以在同一个项目中,每一个组件内都可以定义相同名称的数据. data () { ...

  3. vue2.0父子组件通信的方法

    vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传 ...

  4. vue2.0父子组件以及非父子组件通信传参详解

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  5. vue2.0父子组件之间通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  6. vue2.0 父子组件通信 兄弟组件通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  7. vue2.0父子组件以及非父子组件通信

    官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...

  8. Vue2.0父子组件间事件派发机制

    从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会 ...

  9. Vue2.0父子组件之间和兄弟组件之间的数据交互

    熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...

随机推荐

  1. Java并发编程实战 第2章 线程安全性

    编写线程安全的 代码,核心在与对共享的和可变的对象的状态的访问. 如果多个线程访问一个可变的对象时没有使用同步,那么就会出现错误.在这种情况下,有3中方式可以修复这个问题: 不在线程之间共享该状态变量 ...

  2. 【HDU5289】Assignment

    题目大意:给定一个长度为 N 的序列,求序列中最大值和最小值相差小于 K 的连续段的个数. 题解: 最大值和最小值相差不超过 K 是一个在值域角度的限制,应考虑采用平衡树或权值...数据结构进行维护. ...

  3. 解决 i18n properties文件中文必须是unicode的问题

    解决 i18n properties文件中文必须是unicode的问题 i18n  unicode  UTF-8  目前产品需要做国际化,但 java 的 I18N 资源文件中中文必须转换成 unic ...

  4. vue作业1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 【NOIP2016提高A组五校联考4】square

    题目 分析 首先,设\(f_{i,j}\)表示最大的以(i,j)为左下角的正方形的边长. 转移显然,\(f_{i,j}=\max(f_{i-1,j},f_{i,j-1},f_{i-1,j-1})+1\ ...

  6. shell练习--PAT题目1005:继续(3n+1)猜想(全绿失败喜加一)

    卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对 n=3 进行验证的时 ...

  7. shiro框架学习-9-shiroSession

    1.什么是会话session : 用户和程序直接的链接,程序可以根据session识别到哪个用户,和javaweb中的session类似 2. 什么是会话管理器SessionManager : 会话管 ...

  8. SQL高级教程-TOP 子句

    TOP 子句 TOP 子句用于规定要返回的记录的数目. 对于拥有数千条记录的大型表来说,TOP 子句是非常有用的. 注释:并非所有的数据库系统都支持 TOP 子句. SQL Server 的语法: S ...

  9. luogu P2661 信息传递 x

    P2661 信息传递 题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知 ...

  10. 小样本学习Few-shot learning

    One-shot learning Zero-shot learning Multi-shot learning Sparse Fine-grained Fine-tune 背景:CVPR 2018收 ...