반응형
동일한 구성 요소의 메서드 내에서 VueJS 수명 주기 후크 호출
나는 VueJS를 사용한다.mounted
보기를 작성하는 데이터를 가져오려면 "일반" 구성요소를 연결하십시오.그 컨테이너가 파괴되면, 나는beforeDestroy
그리고destroyed
수명 주기 후크를 사용하여 구성 요소를 "정리"하십시오.
이 세 개의 갈고리는 경로가 같은 경로로 변경되었을 때 호출되는 것이 아니라 매개 변수가 서로 다르다.이 문제를 해결하는 방법은 다음과 같다.$route
에 있어서의 변화.watch
다음과 같다:
watch: {
'$route' (to, from) {
this.id = to.params.id
this.getPageData()
}
}
그러나 로직을 복사하는 대신mounted
,beforeDestroy
그리고destroyed
이런 걸 하고 싶었는데
watch: {
'$route' (to, from) {
// Manually run lifecycle clean-up hooks
this.beforeDestroy()
this.destroyed()
// Update Id, and run mounted
this.id = to.params.id
this.mounted()
}
}
불행히도, 갈고리가 노출되지 않은 것 같다.$vm
.내가 알지 못하는 이것을 성취할 방법이 있을까?내가 뭔가 명백한 것을 놓치고 있는 것일까?아니면 더 나은/선호적인 접근법이 있는가?
각 라이프사이클 내부의 코드를 구성요소 방법으로 추출한 다음 두 위치에서 그 방법을 호출할 수 있다.예를 들면 다음과 같다.
mounted: function() {
this.__mounted();
},
methods: {
__mounted() {
//mounted code here
}
},
watch: {
'$route' (to, from) {
this.__mounted();
}
}
반응형
'Programing' 카테고리의 다른 글
로그인 및 등록 페이지의 탐색 표시줄을 숨기는 방법 (0) | 2022.03.14 |
---|---|
단위시험을 위한 각도부재에서의 모의서비스 기능 (0) | 2022.03.13 |
Navigator를 사용하여 react original로 동일한 경로를 렌더링할 수 있는가? (0) | 2022.03.13 |
Python을 사용하여 HTML 구문 분석 (0) | 2022.03.13 |
Vuetify에서 v-card 구성 요소의 중앙에 콘텐츠를 맞추는 방법 (0) | 2022.03.13 |