详解Vue2中组件间通信的解决全方案


Posted in Javascript onJuly 28, 2017

前言

在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,下面这篇文章将给大家介绍关于Vue2组件间通信的相关内容,下面话不多说,来一起看看详细的介绍。

组件通讯包括:父子组件间的通信和兄弟组件间的通信。在组件化系统构建中,组件间通信必不可少的。

父组件--> 子组件

1. 属性设置

父组件关键代码如下:

<template>
 <Child :child-msg="msg"></Child>
</template>

子组件关键代码如下:

export default {
 name: 'child',
 props: {
 child-msg: String
 }
};

child-msg 为父组件给子组件设置的额外属性值,属性值需在子组件中设置props,子组件中可直接使用child-msg变量。

2. 子组件调用父组件

子组件通过 $parent 获得父组件,通过 $root 获得最上层的组件。

子组件--> 父组件

1. 发送事件/监听事件

子组件中某函数内发送事件:

this.$emit('toparentevent', 'data');

父组件监听事件:

<Child :msg="msg" @toparentevent="todo()"></Child>

toparentevent 为子组件自定义发送事件名称,父组件中@toparentevent为监听事件,todo为父组件处理方法。

2. 父组件直接获取子组件属性或方法

给要调用的子组件起个名字。将名字设置为子组件 ref 属性的值。

<!-- 子组件。 ref的值是组件引用的名称 -->
<child-component ref="aName"></child-component>

父组件中通过 $refs.组件名 来获得子组件,也就可以调用子组件的属性和方法了。

var child = this.$refs.aName
child.属性
child.方法()

父组件通过 $children 可以获得所有直接子组件(父组件的子组件的子组件不是直接子组件)。需要注意 $children 并不保证顺序,也不是响应式的。

Bus中央通信

目前中央通信是解决兄弟间通信,祖父祖孙间通信的最佳方法,不仅限于此,也可以解决父组件子组件间的相互通信。如下图:

详解Vue2中组件间通信的解决全方案

各组件可自己定义好组件内接收外部组件的消息事件即可,不用理会是哪个组件发过来;而对于发送事件的组件,亦不用理会这个事件到底怎么发送给我需要发送的组件。

先设置Bus

//bus.js 
import Vue from 'vue'
export default new Vue();

组件内监听事件:

import bus from '@/bus';

export default {
 name: 'childa',
 methods: {
 },
 created() {
 bus.$on('childa-message', function(data) {
 console.log('I get it');
 });
 }
};

发送事件的组件:

import bus from '@/bus';
//方法内执行下面动作
bus.$emit('childa-message', this.data);

Bus中央通信的方案各种情况下都可用,比较方便,具体内在原理后续更新说明。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者使用vue能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 日期常用的方法
Nov 11 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
JavaScript中import用法总结
Jan 20 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 Javascript
javascript对象3个属性特征
Nov 17 Javascript
详解React 16 中的异常处理
Jul 28 #Javascript
JavaScript截屏功能的实现代码
Jul 28 #Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 #Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 #Javascript
js 获取html5的data属性实现方法
Jul 28 #Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 #jQuery
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 #Javascript
You might like
使用PHP模拟HTTP认证
2006/10/09 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
php四种基础算法代码实例
2013/10/29 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
大白话讲解JavaScript的Promise
2017/04/06 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
node.js通过url读取文件
2020/10/16 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
python软件都是免费的吗
2020/06/18 Python
Python常用数据分析模块原理解析
2020/07/20 Python
Django多个app urls配置代码实例
2020/11/26 Python
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
会计专业毕业生自我鉴定
2013/10/29 职场文书
申论倡议书范文
2014/05/13 职场文书
求职信怎么写范文
2014/05/26 职场文书
离婚纠纷代理词
2015/05/23 职场文书
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL