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>