详解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 09 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
vue router 配置路由的方法
Jul 26 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
详解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实现弹出消息提示框的两种方法
2013/12/17 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
nodejs批量修改文件编码格式
2015/01/22 NodeJs
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
Vue实现省市区三级联动
2020/12/27 Vue.js
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python sys.argv用法实例
2015/05/28 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
python画环形图的方法
2020/03/25 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
学校安全检查制度
2014/01/27 职场文书
党员大会主持词
2014/04/02 职场文书
学校开学标语
2014/10/06 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
离婚协议书格式
2014/11/21 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
2015年采购工作总结
2015/04/10 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
教学反思怎么写
2016/02/24 职场文书
详解Spring事件发布与监听机制
2021/06/30 Java/Android