源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)

  • 时间:2021-05-13 09:58 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
我们接着[b][url=http://www.1sucai.cn/article/123645.htm]上文[/url][/b]继续,本文我们讲解兄弟组件的通信,项目结构还是跟上文一样. 在src/assets目录下建立文件EventHandler.js,该文件的作用在于给同级组件之间传递事件 EventHandler.js代码:
import Vue from 'Vue';
export default new Vue();
[b]1,在Components目录下新建一个组件Brother1.vue[/b]
<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定义的 ) [b]2,在Components目录下新建一个组件Brother2.vue[/b]
<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)出发的自定义事件 [b]三、在App.vue中调用两个同级组件[/b]
<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>
[b]小结:[/b] 创建一个事件传递中心,例如EventHandler.js,用它作为传递消息的中介 在需要传值的组件中用EventHandler.$emit触发一个自定义事件,并传递参数 在需要接收数据的组件中用EventHandler.$on监听自定义事件,并在回调函数中处理传递过来的参数 以上这篇Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部