vue2.0父子组件间通信的实现方法
作者:JackWhite 发布时间:2024-04-28 09:20:16
标签:vue,父子,通信
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),即:
使用 $on(eventName) 监听事件
使用 $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'; });}
来源:http://www.jianshu.com/p/6389d424965f
0
投稿
猜你喜欢
- 本文实例讲述了Python中偏函数用法。分享给大家供大家参考,具体如下:python中偏函数当一个函数有很多参数时,调用者就需要提供多个参数
- 本文实例讲述了Python判断文本中消息重复次数的方法。分享给大家供大家参考,具体如下:#coding:gbk'''
- 一个朋友给她的朋友买礼物。撕心裂肺、绞尽脑汁。最后蹦出来一个主意:“送打火机”我不知道小妞们通过哪的投票,就这么断定男人都喜欢打火机。导致一
- 回顾 MySQL / InnoDB 的改善历史。你能很容易发现。在MySQL 5.6稳定版本中从来没有在read-only 这么
- 前言本章主要讲述Windows环境下的Jenkins的自动化部署关于JenKins下载的方式有两种,1)直接下载war包,用tomcat/j
- 一段这样的JavaScript代码,猜猜结果如何?var i = 0, m =
- AdobeAdobe公司的标识1982年,40多岁的程序员约翰·沃诺克(John Warnock)和查尔斯·杰斯克(Charles Gesc
- 一、前言图像拼接技术就是将数张有重叠部分的图像(可能是不同时间、不同视角或者不同传感器获得的)拼成一幅无缝的全景图或高分辨率图像的技术。二、
- TabularInline类用于在A页面上编辑B表的字段,举例说明,如果models.py中有Staff、Job两个model:from d
- 注意:本示例仅供学习参考~混淆原理出于某种原因,明文信息通过自定义字体进行渲染,达到混淆目的。举个例子:网页源码 <p>123&
- 实验环境1.安装Python 3.72.安装requests, bs4,pymysql 模块实验步骤1.安装环境及模块可参考https://
- 4款JavaScript放大镜特效脚本。准确的说,Anythingzoomer和Bezoom才是正宗的放大镜特效,当鼠标悬浮在图片上时,能放
- 快到 520 了,分享几段 520 专属 Python 代码,不多说了,下面直接上货。No.1效果:主要代码:import tur
- 许多游戏玩家一定会对游戏中的动态鼠标指针有很深的印象,其实只要一句简单的CSS(层叠样式表),你也能在网页上实现这种效果。首先,你需要一个鼠
- 在html中引入外部js文件,并调用js文件中的带参函数1 项目结构2 编写a.js、test.html//a.jsfunction abc
- 本文实例讲述了C#处理MySql多个返回集的方法。分享给大家供大家参考。具体方法如下:关于Mysql返回多个集java和Php的较多,但是C
- 1. 前言中文分词≠自然语言处理!HanlpHanLP是由一系列模型与算法组成的Java工具包,目标是普及自然语言处理在生产环境中的应用。H
- goroutinue基本介绍进程和线程说明进程介绍程序在操作系统中的一次执行过程,是系统进行资源分配和调度的基本单位线程只是进程的一个执行实
- Python 正则表达式正则表达式本身是独立于编程语言的知识,但是它又依附于编程语言,基本上我们所使用的编程语言都提供了对它的实现,当然了,
- 作为一个MySQL的系统管理员,你有责任维护你的MySQL数据库系统的数据安全性和完整性。本文主要主要介绍如何建立一个安全的MySQL系统,