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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
vue基于Teleport实现Modal组件
May 31 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
Zend公司全球首推PHP认证
2006/10/09 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
js对数字的格式化使用说明
2011/01/12 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
深入理解Django中内置的用户认证
2017/10/06 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
django页面跳转问题及注意事项
2019/07/18 Python
python实现udp传输图片功能
2020/03/20 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
python各种excel写入方式的速度对比
2020/11/10 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
个性与发展自我评价
2014/02/11 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
请假条应该怎么写?
2019/06/24 职场文书
导游词书写之黄山
2019/08/06 职场文书
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android