详解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 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
jquery监控数据是否变化(修正版)
Apr 12 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
js实现坦克大战游戏
Feb 24 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 Javascript
在vue中created、mounted等方法使用小结
Jul 21 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
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
js实现消息滚动效果
2017/01/18 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
python数据抓取3种方法总结
2021/02/07 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
新三好学生主要事迹
2014/01/23 职场文书
美德好少年主要事迹
2014/01/29 职场文书
出纳担保书范文
2014/04/02 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
springboot读取resources下文件的方式详解
2022/06/21 Java/Android