vue2.0 兄弟组件(平级)通讯的实现代码


Posted in Javascript onJanuary 15, 2018

1、前戏吧

先看看前两篇文章:

看图 看图 看图!!!

vue2.0 兄弟组件(平级)通讯的实现代码 

个人理解:

这明显是生活中弟弟打电话哥哥一样,双方都需要手机,需要信号发射塔。

  • 弟弟 => A组件
  • 哥哥 => B组件
  • 弟弟的手机 => $emit发送数据
  • 哥哥的手机 => $on监听并接收数据
  • 信号发射塔 => 中间事件线
  • App.vue => 不用说都知道是地球

2、 代码

2.1、在src/asstes下新建中间事件线ligature .js (注意后缀.js)

import Vue from 'Vue'
export default new Vue;

2.2、在src/components新建A.vue

<template>
 <div>
 <h2>A组件</h2>
 <button v-on:click="spot">点一下就传</button>
 </div>
</template>
<script>
 import bus from '../assets/ligature';
 export default {
 methods: {
 spot: function() {
 //监听A组件中的spot,并发送数据
 bus.$emit("spot", ' 没想到吧!!我是A组件')
 }
 }
 }
</script>

2.3、在src/components新建B.vue

<template>
 <div>
 <h2>B组件</h2>
 <p>结果:{{msg}}</p>
 </div>
</template>
<script>
 import bus from "../assets/ligature";
 export default {
 data() {
 return {
 msg: "这TMD是默认值除非你点一下上面的按钮"
 };
 },
 mounted() {
 var _this = this;
 //监听A组件中的spot,并接受数据
 bus.$on("spot", function(msg) {
 _this.msg = msg;
 });
 }
 };
</script>
<style>
p{
 font-size: 20px;
 color: darkcyan;
}
</style>

2.4、修改App.vue (地球),注册这两个组件,并添加这两个组件的标签

<template>
 <div id="app">
 <A/>
 <hr>
 <B/>
 </div>
</template>
<script>
import A from './components/A'
import B from './components/B'
export default {
 name: 'App',
 components: {
 A,
 B
 }
}
</script>

3、效果

vue2.0 兄弟组件(平级)通讯的实现代码 

总结

以上所述是小编给大家介绍的vue2.0 兄弟组件(平级)通讯的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
axios基本入门用法教程
Mar 25 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 #Javascript
基于jquery的on和click的区别详解
Jan 15 #jQuery
仿淘宝JSsearch搜索下拉深度用法
Jan 15 #Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 #Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 #Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 #Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 #Javascript
You might like
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
php的扩展写法总结
2019/05/14 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
js类 from qq
2006/11/13 Javascript
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
JavaScript中的事件处理
2008/01/16 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
Vue实现手机计算器
2020/08/17 Javascript
对于Python中线程问题的简单讲解
2015/04/03 Python
Anaconda入门使用总结
2018/04/05 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
简单了解django orm中介模型
2019/07/30 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
高中生自我评语大全
2014/01/19 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
Flask response响应的具体使用
2021/07/15 Python
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技