let eventHub = new Vue()// 监听
eventHub.$on('eventName',(data)=>{
console.log('Trigger this event and receive '+ data)})// 广播
eventHub.$emit('eventName', data)// 去掉监听
eventHub.$off('eventName')
eventHub使用
假设你用的是脚手架工具,引用文件名叫 main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
//全局事件对象,跨页面通信调用,适合一两个组件之间传递数据
Vue.prototype.$eventHub = Vue.prototype.$eventHub || new Vue()
new Vue({
el:'#app',
router,
components:{ App },
template:'<App/>'})
组件部分
主页面(传递数据的页面):HelloWorld.vue
<template><div class="hello"><button @click='send'>发送数据</button><SZR></SZR></div></template><script>
import SZR from "@/components/SZR"
export default{
name:'HelloWorld',
components:{
SZR
},
data (){return{
SZR:'发送数据',}},
methods:{send(){//向子组件传递数据
this.$eventHub.$emit("SZR", this.SZR)}}}</script><style scoped></style>