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 相关文章推荐
Script标签与访问HTML页面详解
Jan 10 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
js逆向解密之网络爬虫
May 30 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 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
如何把PHP转成EXE文件
2006/10/09 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
JQuery 常用操作代码
2010/03/14 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
Python tornado上传文件的功能
2020/03/26 Python
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
信息管理专业推荐信
2013/10/29 职场文书
高中体育教学反思
2014/01/24 职场文书
《都江堰》教学反思
2014/02/07 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
创业计划之特色精品店
2019/08/12 职场文书