如何在 bootstrap 中发出带有 Vue.js 的事件？

Question

我想要的

我想在有请求时发出一个事件，在有响应时发出另一个事件并在我的 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')

我试过的

Bootstrap

Vue.http.interceptors.push((request, next) => {
  Vue.emit('request', request)

  next((response) => {
     Vue.emit('response', response)
  })
})

App.vue

<template>
  <div v-on:request="doStuff">
    <navigation-bar></navigation-bar>
    <router-view></router-view>
  </div>
</template>

我收到这个错误：

TypeError: __WEBPACK_IMPORTED_MODULE_0_vue___default.a.$emit is not a function

新App.vue讨论后

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

Answer 1

您可以使用 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()

您可以阅读有关 eventBuses here 的更多信息。

你这样做的问题是：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.
    }
  }
}

在这里，应用程序组件在创建应用程序组件的那一刻开始监听这两个事件。您可以使用其他 life-cycle 挂钩，但由于这些事件是由单独的 Vue 实例发出的，即 bus 您不能执行以下操作：<div v-on:request="doStuff">...</div>

如何在 bootstrap 中发出带有 Vue.js 的事件？

How to emit an event with Vue.js inside the bootstrap?

javascript

vue.js

vue-resource

我想要的

情况

我试过的

Bootstrap

App.vue

新App.vue讨论后