详解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权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
JS中substring与substr的用法
Nov 16 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
详解JavaScript中的强制类型转换
Apr 15 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
vue实现淘宝购物车功能
Apr 20 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 神盾解密工具
2014/06/08 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
轻轻松松学习JavaScript
2007/02/25 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
js实现日历
2020/11/07 Javascript
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
感恩母亲节演讲稿
2014/05/07 职场文书
股东合作协议书
2014/09/12 职场文书
党小组考察意见
2015/06/02 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android