구성 요소가 부모 구성 요소에서 동적으로 변경된 경우 하위 구성 요소의 메서드 호출

Question

다음과 같은 템플릿 <div><component :is="current"></component></div>과 두 개의 자식 구성 요소가 포함 된 하나의 상위 구성 요소가있는 간단한 구성 요소 계층 구조가 있습니다. out, current의 값을 통해.

구성 요소의 '전환'논리가 상위 구성 요소에서 처리되고 있습니다. 그러나 첫 번째 자식 구성 요소에서 방출 된 이벤트에 대한 응답으로 부모 구성 요소에서 수신 대기하고 부모 구성 요소에서 current의 값을 변경하는 두 번째 자식 구성 요소에서 메서드를 실행하려고하면 mounted 수명주기를 통해 메서드가 실행됩니다. 후크, 예상 된 결과가 관찰되지 않습니다.

기본적으로 상위 구성 요소의 현재 구성 요소로 해당 구성 요소를 '전환'했을 때 하위 구성 요소의 메소드를 호출하는 적절한 방법을 찾을 수 없습니다.

현실적으로 인스턴스의 $refs 및 $children 속성을 사용하여 보았습니다. 그러나 이것들은 도움이되지 않습니다. 나는 또한 이벤트 시스템을 사용하는 것을 추론했다. 일반적으로 mounted 라이프 사이클 후크에서 이벤트 수신기를 정의하지만 수명주기 후크를 사용하는 '문제'를 참조하십시오

이 상황에 대한 일반적인 접근 방법은 무엇입니까?

1) mounted 라이프 사이클 후크를 사용 :

Answer 1

즉시 자식 구성 요소는 "현재"하위 구성 요소 인 메소드를 호출하는 마음에 온 두 가지 옵션이 있습니다. 이 작업을 수행하려면 하위 구성 요소를 조건부로 표시하려면 v-if을 사용해야하며 그렇지 않으면 하위 구성 요소가 mounted 수명주기 후크를 트리거하지 않습니다. 그렇지 않으면 v-show 또는 하위 구성 요소를 조건부로 표시하기위한 다른 메커니즘을 사용하는 경우 mounted 후크는 한 번만 트리거됩니다.

2) 감시 속성 사용. 위의 대신에, 당신은 뭔가를 할 수있는 다음

<child-component :target_prop="current"></child-component> 

Vue.component('child-component', { 
    . . ., 
    props: ['target_prop'], 
    watch: { 
     target_prop: function() { 
      if(this.target_prop == your_expected_value) { 
       //execute the desired method for this component 
      } 
     } 
    } 
}); 

이것은 물론, 단지 예를 증명 컨셉과 당신의 이점에 감시 속성을 사용하는 다른 방법의 많음이있다 .

나는 또한 컴포넌트 간 통신을 처리하기 위해 "버스"를 사용하는 것에 대해 들어 봤지만 위의 두 가지 솔루션보다 더 좋을 것이라고는 믿을 수 없다.

개인적으로 저는 mounted 라이프 사이클 후크 접근 방식을 선호합니다. 그러나 자식 구성 요소의 모든 "설정"또는 데이터가 변경 될 때 손실된다는 경고가 있지만 (설정 개체를 파괴 및 저장/필요에 따라 해당 설정을 복원하지만 지저분해질 수 있음). 어떤 접근 방식이 귀하의 필요에 더 잘 맞는지 그리고 어떤 결과가 더 편안하게 대처할 수 있는지에 대한 최종 판단을 내려야합니다.