vue2.0父子组件及非父子组件之间的通信方法


Posted in Javascript onJanuary 21, 2017

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', () => { //Hub接收事件
    this.msg = 'hehe';
  });
}

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

以上所述是小编给大家介绍的vue2.0父子组件及非父子组件之间的通信方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
自己封装的javascript事件队列函数版
Jun 12 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
js调用网络摄像头的方法
Dec 05 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 #Javascript
JS设置CSS样式的方式汇总
Jan 21 #Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 #Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 #Javascript
js操作浏览器的参数方法
Jan 21 #Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 #Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 #Javascript
You might like
php 分页类 扩展代码
2009/06/11 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
JavaScript版代码高亮
2006/06/26 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
javascript常用函数(1)
2015/11/04 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
Vue实现简单的拖拽效果
2020/08/25 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python中去空格函数的用法
2014/08/21 Python
利用Python破解验证码实例详解
2016/12/08 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
pycharm显示远程图片的实现
2019/11/04 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
高中美术教学反思
2014/01/19 职场文书
四查四看剖析材料
2014/02/14 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
母亲节感言
2015/08/03 职场文书
财务人员入职担保书
2015/09/22 职场文书
阳光体育运动标语口号
2015/12/26 职场文书