vue 全局事件(eventBus)设置

系统管理员 2022-05-23 05:44 676阅读 0赞

使用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 }}   <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>