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  Error 对象 错误处理
May 18 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
Vue中component标签解决项目组件化操作
Sep 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 输出URL的快捷方式示例代码
2013/09/22 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
php实现源代码加密的方法
2015/07/11 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
JavaScript脚本性能的优化方法
2007/02/02 Javascript
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
婚礼司仪主持词
2014/03/14 职场文书
公司股东出资证明书
2014/11/01 职场文书
2014年党建工作总结
2014/11/11 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
承诺函范文
2015/01/21 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
男生贾里读书笔记
2015/06/30 职场文书
python办公自动化之excel的操作
2021/05/23 Python
SQL Server删除表中的重复数据
2022/05/25 SQL Server