Как передавать события из компонента в основной экземпляр usint $ emit или vuex - PullRequest
Новая
       48

Как передавать события из компонента в основной экземпляр usint $ emit или vuex

1 голос
/ 08 мая 2020

Я хочу использовать свой основной vuejs экземпляр для управления подключением и событиями sockets.io. У меня есть этот код, который работает, но у меня есть проблемы с передачей событий от компонента к родительскому экземпляру. Код находится внутри расширения chrome, которое использует vuex, но я пока не знаком с 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: {}
})

1 Ответ

1 голос
/ 08 мая 2020

Итак, вы можете попробовать vuex, но это кажется довольно тяжелым, если все, что вам нужно, - это прослушиватель событий basi c. Одним из вариантов может быть go с маршрутом eventBus и настройка эмиттера и события слушателя. в основном. js вы можете добавить 

export const eventBus = new Vue()

Затем в своем коде вы можете заменить this.$emit('connected', 'socket connected')

на eventBus.$emit('connected', true_or_any_other_value_here)

Затем в вашем компоненте, который вы прислушиваемся к событию. Импортируйте eventBus из main. js и добавьте: 

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

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

Я думаю, что это должно помочь, я еще не пробовал функцию обратного вызова и передачу данных, поскольку я обычно проверяю на переднем конце но если есть объект данных, который вам нужно сохранить, укажите, и я могу помочь вам с помощью vuex.

...