[英]How to emit an event with Vue.js inside the bootstrap?
如果有请求,我想发出一个事件,如果有响应,我想发出另一个事件,并在我的App.vue
中收听它。
我正在使用VueResource
和内置的拦截器:
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.http.interceptors.push((request, next) => {
next((response) => {
})
})
const app = new Vue({
render: h => h(App)
}).$mount('#app')
Vue.http.interceptors.push((request, next) => {
Vue.emit('request', request)
next((response) => {
Vue.emit('response', response)
})
})
<template>
<div v-on:request="doStuff">
<navigation-bar></navigation-bar>
<router-view></router-view>
</div>
</template>
我收到此错误:
类型错误:__WEBPACK_IMPORTED_MODULE_0_vue___default.a.$emit 不是函数
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import EventBus from './EventBus'
export default {
created () {
EventBus.$on('request', this.invokeLoading())
EventBus.$on('response', this.stopLoading())
},
methods: {
invokeLoading () {
console.log('Start')
},
stopLoading () {
console.log('Stop')
},
}
}
</script>
您可以使用eventBus
来处理这种情况,例如:
import Vue from 'vue'
import VueResource from 'vue-resource'
import bus from 'path/to/event-bus'
Vue.http.interceptors.push((request, next) => {
bus.$emit('request', request)
next((response) => {
bus.$emit('response', response)
})
})
const app = new Vue({
render: h => h(App)
}).$mount('#app')
并且 eventBus 可以像这样创建:
import Vue from 'vue'
export default new Vue()
您可以在此处阅读有关eventBus
更多信息。
你这样做的问题是: Vue
是一个构造函数,它本身没有emit
方法。
要监听任何组件中发出的事件,您需要导入 eventBus。 因此,假设应用程序组件:
import bus from 'path/to/event-bus'
export default {
created () {
bus.on('request', this.onRequest)
bus.on('response', this.onRequest)
},
methods: {
onRequest () {
// do something.
},
onResponse () {
// do something.
}
}
}
在这里,应用程序组件在创建应用程序组件的那一刻开始监听这两个事件。 您可以使用其他 生命周期钩子,但由于这些事件是由单独的Vue
实例(即bus
)发出的,因此您不能执行以下操作: <div v-on:request="doStuff">...</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.