时间戳

首页 > 解决方案 > 如何使用 $emit 或 vuex 从组件向主实例发出事件

vue.js - 如何使用 $emit 或 vuex 从组件向主实例发出事件

问题描述

我想使用我的主 vuejs 实例来管理 sockets.io 连接和事件。我有这段代码可以工作，但是我在将事件从组件传递到父实例时遇到了一些问题。该代码位于使用 vuex 的 chrome 扩展中，但我目前对 vuex 并不熟悉。如何在主实例和子组件之间传递事件？有人建议我使用 vuex，但它分为三个文件，我现在无法理解如何获得我想要的。

<script>
  // child component 
  export default {
    data() {
      return {
        isRegistered: false,
        isConnected: false
      }
    },
    mounted() {
      this.$on('connected', function(event) {
        console.log(event)
      })
    },
    methods: {
      initRoom() {
        console.log('clicked!')
        this.$emit('openConnection')
      }
    }
  }
</script>

// main instance
import Vue from 'vue'
import App from './App'
import store from '../store'
import router from './router'
import VueSocketIOExt from 'vue-socket.io-extended';
import io from 'socket.io-client';

const socket = io('https://lost-conn.herokuapp.com', {
  autoConnect: false
});

Vue.use(VueSocketIOExt, socket, { store });

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App),
  mounted() {
    this.$on('openConnection', function() {
      socket.open()
      alert('k')
    })
  },
  data: {
    isRegistered: false,
    isConnected: false,
    message: ''
  },
  sockets: {
    connect() {
      console.log('socket connected')
      this.$emit('connected', 'socket connected')
    },
  },
  methods: {}
})

标签： vue.jsgoogle-chrome-extensionvuex

解决方案

所以，你可以试试 vuex，但如果你想要的只是一个基本的事件监听器，它似乎有点重。一种选择可能是使用 eventBus 路由并设置发射器和侦听器事件。在 main.js 你可以添加

export const eventBus = new Vue()

然后在你的代码中你可以交换this.$emit('connected', 'socket connected')

和eventBus.$emit('connected', true_or_any_other_value_here)

然后在您正在侦听事件的组件中。从 main.js 导入 eventBus 并添加：

data: ( => ({ bus: eventBus }),

created() {
    this.bus.$on('connected', ($event) => myCallbackFunction($event) )
},

我认为这应该可以解决问题，我还没有尝试过回调函数和传递数据，因为我通常会在前端进行检查，但是如果您需要存储数据对象，请指定，我可能会为您提供帮助通过使用 vuex。

推荐阅读