반응형
프로그래밍 방식으로 마운트된 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
반응형
'programing' 카테고리의 다른 글
글로벌 확인 대화상자 기능 구현에 관한 Vuejs 문제 (0) | 2022.07.26 |
---|---|
Vuex 조건부(Lazy-loading) 스토어 (0) | 2022.07.26 |
왜 sun.misc는?안전하지 않은 것이 존재하며, 현실에서 어떻게 사용될 수 있을까요? (0) | 2022.07.26 |
TypeError: 정의되지 않은 속성 'getters'를 읽을 수 없습니다. (0) | 2022.07.26 |
Vue.js에서 스크롤 다운 이벤트에서 네비게이션 페이드인 및 페이드아웃을 하는 방법YOffset = 0 (0) | 2022.07.26 |