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学习第一章 W3C DOM简介
Feb 19 Javascript
js原型链原理看图说明
Jul 07 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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
星际争霸中的热键
2020/03/04 星际争霸
php中用memcached实现页面防刷新功能
2014/08/19 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
js css自定义分页效果
2017/02/24 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
go和python调用其它程序并得到程序输出
2014/02/10 Python
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
python pygame模块编写飞机大战
2018/11/20 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
python3 实现口罩抽签的功能
2020/03/11 Python
如何理解python面向对象编程
2020/06/01 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
妇产医师自荐信
2014/01/29 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
营销学习心得体会
2014/09/12 职场文书
感恩教育观后感
2015/06/17 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
Python字典的基础操作
2021/11/01 Python