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 相关文章推荐
js调用后台servlet方法实例
Jun 09 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
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多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
vue-router 组件复用问题详解
2018/01/22 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
python实现比较文件内容异同
2018/06/22 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
好人好事事迹材料
2014/02/12 职场文书
开展创先争优活动总结
2014/08/28 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
出生医学证明书
2014/09/15 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
英语教师求职信范文
2015/03/20 职场文书
演讲开场白和结束语
2015/05/29 职场文书
运动会主持词大全
2015/07/02 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL