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 dom 操作详解 js加强
Jul 13 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
jquery密码强度校验
Dec 02 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
eclipse创建python项目步骤详解
2019/05/10 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
python GUI模拟实现计算器
2020/06/22 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
党的群众路线学习材料
2014/05/16 职场文书
酒店开业策划方案
2014/06/02 职场文书
学校教研活动总结
2014/07/02 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
学生会部长竞选稿
2015/11/19 职场文书
《实心球》教学反思
2016/02/23 职场文书
Mysql Show Profile
2021/04/05 MySQL