1.父组件传递数据给子组件

父组件数据如何传递给子组件呢?可以通过props属性来实现

父组件:

  

 <parent>
<child :child-msg="msg"></child>//这里必须要用 - 代替驼峰
</parent> data(){
return {
msg: [1,2,3]
};
}

子组件通过props来接收数据: 
方式1:

 props: ['childMsg']

方式2 :

 props: {
childMsg: Array //这样可以指定传入的类型,如果类型不对,会警告
}

方式3:

 props: {
childMsg: {
type: Array,
default: [0,0,0] //这样可以指定默认的值
}
}

这样呢,就实现了父组件向子组件传递数据.

2.子组件与父组件通信

那么,如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的.

 子组件:
<template>
<div @click="up"></div>
</template> methods: {
up() {
this.$emit('upup','hehe'); //主动触发upup方法,'hehe'为向父组件传递的数据
}
}

父组件:

 <div>
<child @upup="change" :msg="msg"></child> //监听子组件触发的upup事件,然后调用change方法
</div>
methods: {
change(msg) {
this.msg = msg;
}
}

3.非父子组件通信

如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现通信. 
所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件.

 let Hub = new Vue(); //创建事件中心

组件1触发:

 <div @click="eve"></div>
methods: {
eve() {
Hub.$emit('change','hehe'); //Hub触发事件
}
}

组件2接收:

 <div></div>
created() {
Hub.$on('change', (hehe) => { //Hub接收事件
this.msg = 'hehe';
});
}

这样就实现了非父子组件之间的通信了.原理就是把Hub当作一个中转站!

由于vue2.0 移除了1.0中的$dispatch 和$broadcast 这两个组件之间通信传递数据的方法 ,官方的给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了 一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口.

请直接看代码,在初始化web app的时候,给data添加一个 名字为eventhub 的空vue对象

 new Vue({
el: '#app',
router,
render: h => h(App),
data: {
eventHub: new Vue()
}
})

好的 这个时候 你就可以一劳永逸了,在任何组件都可以调用事件发射 接受的方法了.

如何获取到这个空的vue对象 eventhub呢.在组件里面直接调用这个

某一个组件内调用事件触发

 //通过this.$router.eventHub获取此对象
//调用$emit 方法
this.$router.eventHub.$emit('YOUR_EVENT_NAME', yourData)

另一个组件内调用事件接受,当然在组件销毁时接触绑定,使用$off方法

 this.$router.eventHub.$on('YOUR_EVENT_NAME', (yourData)=>{
handle(yourData)
} )

vue2.0父子组件以及非父子组件通信传参详解的更多相关文章

  1. Vue父子组件及非父子组件如何通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...

  2. React受控组件和非受控组件

    受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题.因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态. ...

  3. vue传值(父子传值,非父子传值)

    vue组件传值,分为父子传值和非父子传值,父子传值又分为父传子和子传父. 组件之间的传值,实现了数据的联动,是从操作Dom到操作数据一个跳转性的突破,在学习vue双向绑定原理之后, 这种观念就应该继续 ...

  4. React:受控组件与非受控组件混用实战 - 译文

    原文链接:React: hybrid controlled components in action 受控组件 非受控组件 混用受控组件和非受控组件 原则一 原则二 原则三 原则四 实施方案 总结 F ...

  5. 浅谈react受控组件与非受控组件

    引言 最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为 ...

  6. react 表单(受控组件和非受控组件)

    我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行 ...

  7. react中 受控组件和 非受控组件 浅析

    一 受控组件 顾名思义,受控 也就是能够被控制,简而言之也就是 该组件ui的显示或者内部state逻辑的变化依赖外部的 props的传入. 二 非受控组件 顾名思义,非受控,也就是内部的视图变化,st ...

  8. react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)

    第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标 理解因为react的单向数据流 理解表单组件会因为react数据流变的不好维护 理解受控组件与非受控组件的实质区别 理解 ...

  9. Android四大组件之——Activity的生命周期(图文详解)

        转载请在文章开头处注明本博客网址:http://www.cnblogs.com/JohnTsai       联系方式:JohnTsai.Work@gmail.com       [Andro ...

随机推荐

  1. doker基础

    去 Docker Hub 上拉取一个叫 hello-world 的集装箱docker pull hello-world然后让这个集装箱跑起来docker run hello-world查看本机所安装的 ...

  2. 人活着系列Tanya和蔡健雅猪 (floyd)

    人活着系列之芳姐和芳姐的猪 Time Limit: 1000MS Memory limit: 65536K 题目描写叙述 芳姐特别喜欢猪,所以,她特意养了m个猪圈,顺便在k条无向边,每条边有都有起点v ...

  3. Linux 系统安装(5分钟)

    安装版本:CentOS 6.5 minimal 虚拟机工具:VMware 虚拟机配置:1核2线程 2G内存 50G硬盘 步骤: 一.虚拟机配置 1.打开VMware,创建新的虚拟机,选择典型安装: 2 ...

  4. node 后台管理插件forever

    在一台计算机上手动跑Node项目简单,node xx.js就搞定了,想让Node项目后台运行,虽然不能直接用node命令搞定,但是在安装了forever这个包以后,还是很轻松的.不过要是在远程服务器上 ...

  5. Poco vs Boost(Poco也有不少优点,特别是网络功能更强)

    POCO的优点: 1) 比boost更好的线程库,特别是一个活动的方法的实现,并且还可设置线程的优先级. 2) 比 boost:asio更全面的网络库.但是boost:asio也是一个非常好的网络库. ...

  6. WPF小笔记-Popup拖动

    查看了下MSDN发现Popup没有类拟Drag相关的属性和方法,第一时间想了thumb.忙了一会未果,就想起了强大的google. 发现中文资料很少,英文的发现有两篇很不错的,所以笔记在博客园里,希望 ...

  7. 在 __CC_ARM 编译器环境下,使用$Sub$$ 与 $Super$$ 的“补丁”功能

    $Sub$$ 与 $Super$$ 的“补丁”功能(详见 ARM® Compiler v5.06 for µVision® armlink User Guide): 这是一种特殊模式:用于有一个已经存 ...

  8. 微信小程序把玩(一)Hello WeApp

    原文:微信小程序把玩(一)Hello WeApp 本篇默认已经成功安装微信小程序工具 新建项目 AppID查看公众开发平台设置查看(https://mp.weixin.qq.com) 项目名称随意填写 ...

  9. Android开发参考资料

    Android入门第九篇之AlertDialog: http://blog.csdn.net/hellogv/article/details/5955959 Android的AlertDialog详解 ...

  10. 利用BLCR加速android的启动(zygote加入checkpoint支持)

    目前基于android4.2.2基线代码的blcr扩展,编译和启动是没有问题了,但是一重启就挂了. 弄这个有段时间了,很纠结,没有个可靠的结果,但是研究到现在,又舍不得放弃. 我想除了shuaiwen ...