programing

프로그래밍 방식으로 마운트된 Vue 구성 요소에서 방출된 이벤트 듣기

itsource 2022. 7. 26. 23:24
반응형

프로그래밍 방식으로 마운트된 Vue 구성 요소에서 방출된 이벤트 듣기

맵 팝업에 HTML을 추가하기 위해 Vue 컴포넌트를 mixin에 프로그래밍 방식으로 마운트하고 있습니다.이것은 정상적으로 동작하지만, 컴포넌트에서 발생하는 이벤트를 들을 수 없습니다.또, 이 조작이 가능한지를 알 수 없습니다.

작업 코드는 다음과 같습니다.

import Vue from 'vue'
import myComponent from 'components/myComponent'

export default {
  methods: {
    makePopup(coordinates, data) {
      const popup = new Vue({
        ...myComponent,
        parent: this,
        propsData: data
      }).$mount()

      const content = popup.$el.outerHTML

      this.$map.showPopup(coordinates, content)

      popup.$destroy()
    }
  }
}

이것은 동작하고 있습니다만, 에 의해서 송신된 이벤트를 어떻게(언제) 들을 수 있습니까?myComponent나중에 팝업 콘텐츠를 업데이트하기 위해?이러한 이벤트는 인스턴스화/마운트한 후에 실행되지 않는 것 같습니다.어떤 도움이라도 주시면 감사하겠습니다.잘 부탁드립니다.

편집: 명확하게 하기 위해 여기서 문제가 발생하는 이유는myComponent사용 후 해고되지 않을 것 같다$mount()Vue 인스턴스의 메서드.인스턴스 컴파일과 관련이 있다고 생각합니다만, 그것이 올바른 길인지, 가능한 길인지는 잘 모르겠습니다.

올바른 방법을 찾았을 때 내 질문에 대답했습니다.이벤트는 발생했지만 컴포넌트를 너무 빨리 망가뜨리고 있었습니다(실례합니다).

const popup = new Vue({
  ...myComponent,
  parent: this,
  propsData: data
}).$mount()

this.$map.showPopup(coordinates, popup.$el.outerHTML)

popup.$on('complete', () => {
  // update popup content code
  popup.$destroy()
})

언급URL : https://stackoverflow.com/questions/57988446/listening-to-events-emitted-from-a-programmatically-mounted-vue-component

반응형