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

我们接着继续，本文我们讲解兄弟组件的通信，项目结构还是跟上文一样.

在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同级组件之间的通信教程(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。