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 相关文章推荐
基于javascript 闭包基础分享
Jul 10 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
angular6开发steps步骤条组件
Jul 04 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中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
基于JavaScript 类的使用详解
2013/05/07 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
koa源码中promise的解读
2018/11/13 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
python字典操作实例详解
2017/11/16 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
如何理解Python中包的引入
2020/05/29 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
优秀小学生家长评语
2014/01/30 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
小学运动会加油词
2015/07/18 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL