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