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 相关文章推荐
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
js使用递归解析xml
Dec 12 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
js实现点击选项置顶动画效果
Aug 25 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
投票管理程序
2006/10/09 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
深入php处理整数函数的详解
2013/06/09 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
一文了解Vue中的nextTick
2019/05/06 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
python解决网站的反爬虫策略总结
2016/10/26 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
2014年小学元旦活动方案
2014/02/12 职场文书
法制宣传实施方案
2014/03/13 职场文书
蓝颜请假条
2014/04/11 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
年终工作总结范文2014
2014/11/27 职场文书
处级干部考察材料
2014/12/24 职场文书
岳庙导游词
2015/02/04 职场文书
五一劳动节活动总结
2015/02/09 职场文书
英语演讲开场白
2015/05/29 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript
德生2P3收音机开箱评测
2022/04/30 无线电