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 相关文章推荐
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
简单的js计算器实现
Oct 26 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
vscode+gulp轻松开发小程序的完整步骤
Oct 18 Javascript
JS实现可以用键盘方向键控制的动画
Dec 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将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php编写一个简单的路由类
2011/04/13 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
JS常见构造模式实例对比分析
2018/08/27 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
Python下的subprocess模块的入门指引
2015/04/16 Python
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
电脑销售顾问自荐信
2014/01/29 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
总经理助理岗位职责
2015/01/31 职场文书
会计主管岗位职责
2015/04/02 职场文书
文明礼仪主题班会
2015/08/13 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL