Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)


Posted in Javascript onSeptember 14, 2017

我们接着上文继续,本文我们讲解兄弟组件的通信,项目结构还是跟上文一样.

在src/assets目录下建立文件EventHandler.js,该文件的作用在于给同级组件之间传递事件

EventHandler.js代码:

import Vue from 'Vue';
export default new Vue();

1,在Components目录下新建一个组件Brother1.vue

<template>
 <div>
  <h3>Z国: ghostwu</h3>
  <input v-on:click="send" type="button" value="发送">
  <p>{{msg}}</p>
 </div>
</template>
<script>
 import EventHandler from '../assets/EventHandler.js';
 export default {
  data(){
   return {
    msg : ''
   }
  },
  methods : {
   send(){
    EventHandler.$emit( 'myDefineEv', "ghostwu向岛国发射了一颗原子弹" );
   }
  },
  mounted (){
   let _this = this;
   EventHandler.$on( "RDefineEv", function( data ){
    _this.msg = data;
   } );
  }
 }
</script>

。通过EventHandler.$emit发送一个自定义事件myDefineEv

。通过mouted【相当于jquery的ready, 原生js的onload】,这个是vue生命周期的钩子函数, 用于在页面加载完成之后执行代码,在这里就是接收RDefineEv事件( Brother2.vue定义的 )

2,在Components目录下新建一个组件Brother2.vue

<template>
 <div>
  <h3>R国:八嘎</h3>
  {{msg}}
  <input v-on:click="defend" type="button" value="防御">
 </div>
</template>
<script>
 import EventHandler from '../assets/EventHandler.js';
 export default {
  data(){
   return {
    msg : ''
   }
  },
  methods : {
   defend(){
     EventHandler.$emit( 'RDefineEv', "岛国采用了高科技反原子弹系统" );
   }
  },
  mounted(){
   let _this = this;
   EventHandler.$on( "myDefineEv", function( data ){
    _this.msg = data;
   } );
  }
 }
</script>

。点击按钮发送RDefineEv事件

。文档ready的时候,接收myDefineEv(Brother1.vue)出发的自定义事件

三、在App.vue中调用两个同级组件

<template>
 <div id="app">
 <Brother1></Brother1>
 <Brother2></Brother2>
 </div>
</template>

<script>
 import Brother1 from './components/Brother1.vue';
 import Brother2 from './components/Brother2.vue';

 export default {
 components : {
  Brother1,
  Brother2
 }
 }
</script>

小结:

创建一个事件传递中心,例如EventHandler.js,用它作为传递消息的中介

在需要传值的组件中用EventHandler.$emit触发一个自定义事件,并传递参数

在需要接收数据的组件中用EventHandler.$on监听自定义事件,并在回调函数中处理传递过来的参数

以上这篇Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
随鼠标上下滚动的jquery代码
Dec 05 Javascript
javascript时间函数大全
Jun 30 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 #Javascript
对于js垃圾回收机制的理解
Sep 14 #Javascript
使用SVG基本操作API的实例讲解
Sep 14 #Javascript
JSON 数据格式详解
Sep 13 #Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 #Javascript
详解动画插件wow.js的使用方法
Sep 13 #Javascript
JS库之Highlight.js的用法详解
Sep 13 #Javascript
You might like
PHP新手上路(十一)
2006/10/09 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python标准库shutil用法实例详解
2018/08/13 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
类的核心特性有哪些
2014/01/01 面试题
英文简历中的自我评价
2013/10/06 职场文书
安全协议书
2014/04/23 职场文书
服务承诺口号
2014/05/22 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server