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 相关文章推荐
JS 事件绑定函数代码
Apr 28 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
Node.js实现文件上传
Jul 05 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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 SQL之where语句生成器
2009/03/24 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
jquery 防止表单重复提交代码
2010/01/21 Javascript
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
Python写的一个简单DNS服务器实例
2014/06/04 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
Python 中的 else详解
2016/04/23 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python文件选择对话框的操作方法
2019/06/27 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
python如何进行矩阵运算
2020/06/05 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
毕业生的求职信范文分享
2013/12/04 职场文书
促销活动策划方案
2014/01/12 职场文书
医院检讨书范文
2014/02/01 职场文书
5s推行计划书
2014/05/06 职场文书
体育节口号
2014/06/19 职场文书
超市周年庆活动方案
2014/08/16 职场文书
2015年市场部工作总结
2015/04/30 职场文书
职位证明模板
2015/06/23 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers