详解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 Date对象 日期获取函数
Dec 19 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
详解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中的字符串函数
2006/10/09 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
discuz目录文件资料汇总
2014/12/30 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
教室布置标语
2014/06/26 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
法院个人总结
2015/03/03 职场文书
会议简报格式范文
2015/07/20 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
室外天线与收音机天线杆接合方法
2022/04/05 无线电
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python