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 相关文章推荐
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
vue-i18n实现中英文切换的方法
Jul 06 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
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
thinkphp多层MVC用法分析
2015/12/30 PHP
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
生成二维码方法汇总
2014/12/26 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
详解django.contirb.auth-认证
2018/07/16 Python
pandas.cut具体使用总结
2019/06/24 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
Delphi软件工程师试题
2013/01/29 面试题
vue实现倒计时功能
2021/03/24 Vue.js
建筑专业自我鉴定
2013/10/22 职场文书
初中体育教学反思
2014/01/14 职场文书
中学生自我评价范文
2014/02/08 职场文书
林肯就职演讲稿
2014/05/19 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
租房协议书
2014/09/12 职场文书
干部理论学习心得体会
2016/01/21 职场文书
Java基础-封装和继承
2021/07/02 Java/Android
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技