vue2.0父子组件间通信的实现方法


Posted in Javascript onApril 19, 2017

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

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

父组件:

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

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

方式1:

props: ['childMsg']

方式2 :

props: { childMsg: Array //这样可以指定传入的类型,如果类型不对,会警告}
props: { childMsg: { type: Array, default: [0,0,0] //这样可以指定默认的值 }}

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

2.子组件与父组件通信

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

使用 v-on 绑定自定义事件

每个 Vue 实例都实现了事件接口(Events interface),即:

  1. 使用 $on(eventName) 监听事件
  2. 使用 $emit(eventName) 触发事件

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

子组件:

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

父组件:

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

触发事件使用驼峰格式的自定义事件名称,在父组件中就可以使用on-evnet-name的形式来监听。

3.任意组件间通信

如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现通信.

所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件.

使用一个空的 Vue 实例作为中央事件总线:

let Hub = new Vue(); //创建事件中心,注意Hub要放在全局

组件1触发:

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

组件2接收:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 #Javascript
微信小程序页面传值实例分析
Apr 19 #Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 #Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 #Javascript
angular-cli修改端口号【angular2】
Apr 19 #Javascript
Angular2自定义分页组件
Apr 19 #Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 #Javascript
You might like
php的正则处理函数总结分析
2008/06/20 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
Python实现子类调用父类的方法
2014/11/10 Python
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
详解Python中的文件操作
2021/01/14 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
经济管理专业自荐信
2013/12/30 职场文书
初中英语课后反思
2014/04/25 职场文书
商业街策划方案
2014/05/31 职场文书
财产分割协议书范本
2014/11/03 职场文书
房屋认购协议书
2015/01/29 职场文书
革命电影观后感
2015/06/18 职场文书
高中地理教学反思
2016/02/19 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
分享Python获取本机IP地址的几种方法
2022/03/17 Python
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL