컴포넌트에서 메인인스턴스 usint $emit 또는 vuex로 이벤트를 내보내는 방법

컴포넌트에서 메인인스턴스 usint $emit 또는 vuex로 이벤트를 내보내는 방법

메인 vuejs 인스턴스를 사용하여 sockets.io 연결 및 이벤트를 관리합니다.이 코드가 기능하지만 컴포넌트에서 부모 인스턴스로 이벤트를 전달하는 데 문제가 있습니다.코드는 vuex를 사용하는 크롬 확장자 안에 있지만 현재 vuex에 대해 잘 모릅니다.기본 인스턴스와 하위 구성 요소 간에 이벤트를 전달하려면 어떻게 해야 합니까?누군가 vuex를 사용하라고 제안했지만, 3개의 파일로 나뉘어져 있어 원하는 것을 어떻게 구해야 할지 현재로서는 알 수 없습니다.

<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: {}
})

Vuex를 사용해 볼 수 있지만 기본적인 이벤트 청취자만 있으면 좀 무거울 것 같습니다.eventBus 루트를 사용하여 이미터 및 리스너이벤트를 설정하는 옵션도 있습니다.main.displays에서는 추가할 수 있습니다.

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 사용법을 도와드릴 수 있을 것 같습니다.

언급URL : https://stackoverflow.com/questions/61683702/how-to-emit-events-from-component-to-main-instance-usint-emit-or-vuex