vue 全局事件(eventBus)设置

使用vue的时候，我们有时候需要不同的组件之间进行数据的传递，这个时候就需要使用emit和on进行数据传递，当然子父组件还有props数据传递，今天主要讲解emit和on全局事件的数据传递，代码如下：

import Vue from 'vue'
import axios from 'axios'

import App from './App'
import router from './router'

import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)

window.eventBus = new Vue();//注册全局事件对象

Vue.http = Vue.prototype.$http = axios


new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

界面使用：

<template>
  <div >
        <div><h2>文件列表</h2></div>
        <div v-for="item in file_list">
              <span >{{ item }}&nbsp;&nbsp;&nbsp;<button @click="down(item)">下载</button></span>
        </div>
  </div>
</template>
<script>
  export default {
      data(){
          return {

              file_list:['1.txt','2.txt']
          }
      },
      created(){

      },

      methods: {

        down(name){

            eventBus.$emit('eventBusName', name);
        }
      }
  }
</script>

另一个组件的监听：

<template>
  <div >
        <div><h2>文件下载列表</h2></div>
  </div>

</template>
<script>
  export default {

      data(){

        return {

        }
      },
      created(){


        eventBus.$on('eventBusName',function(data){

            console.log(data);

        });

      },

      methods: {
      }

  }
</script>