详解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 Array 数组常用方法
Apr 05 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
浅析vue-router原理
Oct 19 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
webpack是如何实现模块化加载的方法
Nov 06 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP number_format() 函数定义和用法
2012/06/01 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
javascript实现简易计算器
2017/02/01 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
python中json格式数据输出的简单实现方法
2016/10/31 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
学雷锋志愿服务月活动总结
2014/03/09 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
北京英文导游词
2015/02/12 职场文书
承诺书范本大全
2015/05/04 职场文书