Programing

동일한 구성 요소의 메서드 내에서 VueJS 수명 주기 후크 호출

c10106 2022. 3. 13. 10:27
반응형

동일한 구성 요소의 메서드 내에서 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();
  }
}

참조URL: https://stackoverflow.com/questions/48172698/call-a-vuejs-life-cycle-hook-from-within-a-method-on-the-same-component

반응형