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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
JS实现判断移动端PC端功能
Feb 21 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 XML数据解析代码
2010/05/26 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
linux下php上传文件注意事项
2016/06/11 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
python2.6.6如何升级到python2.7.14
2018/04/08 Python
破解安装Pycharm的方法
2018/10/19 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
Python解析微信dat文件的方法
2020/11/30 Python
python爬虫请求头的使用
2020/12/01 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
德国团购网站:Groupon德国
2018/03/13 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
三年级数学教学反思
2014/01/31 职场文书
社区母亲节活动方案
2014/03/05 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
女方离婚起诉书
2015/05/18 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS