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中的数学函数集合
May 08 Javascript
js 异步处理进度条
Apr 01 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
js表头排序实现方法
Jan 16 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
vue2单元测试环境搭建
May 24 Javascript
js基础语法与maven项目配置教程案例
Jul 15 Javascript
JS高级程序设计之class继承重点详解
Jul 07 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 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
Django 日志配置按日期滚动的方法
2019/01/31 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
公积金单位接收函
2014/01/11 职场文书
学历公证书范本
2014/04/09 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
求职简历自我评价范文
2015/03/10 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技
MySQL创建管理LIST分区
2022/04/13 MySQL