Vue 오류 해결 방법: 하위 구성 요소의 상위 구성 요소 인스턴스에 액세스하기 위해 ref를 올바르게 사용할 수 없습니다.
Vue 개발에서 상위 구성 요소와 하위 구성 요소 간의 통신은 매우 일반적인 작업입니다. 일반적인 방법 중 하나는 ref를 사용하여 하위 구성 요소에 있는 상위 구성 요소의 인스턴스에 액세스하는 것입니다. 그러나 때로는 오류가 발생할 수 있습니다. ref를 올바르게 사용하여 하위 구성 요소의 상위 구성 요소 인스턴스에 액세스할 수 없습니다. 이 문서에서는 이 오류의 원인을 소개하고 해결 방법과 코드 예제를 제공합니다.
문제 분석:
상위 구성 요소 인스턴스를 참조하기 위해 하위 구성 요소에서 ref를 사용할 때 때때로 "정의되지 않은 '$parent' 속성을 읽을 수 없습니다."라는 오류가 나타납니다. 이 오류가 발생하는 이유는 하위 구성 요소 생성 과정에서 상위 구성 요소 인스턴스가 완전히 생성되지 않아 하위 구성 요소가 상위 구성 요소 인스턴스에 올바르게 액세스할 수 없기 때문입니다.
해결책:
이 문제를 해결하려면 적절한 시간에 상위 구성 요소 인스턴스에 액세스해야 합니다. Vue는 이러한 상황을 처리하기 위해 라이프사이클 후크 기능, 즉 "마운트" 기능을 제공합니다. 상위 구성 요소가 완전히 생성되었는지 확인하기 위해 하위 구성 요소의 마운트된 후크 기능에서 상위 구성 요소 인스턴스에 액세스할 수 있습니다.
샘플 코드는 다음과 같습니다.
// 상위 구성 요소
<h2>父组件</h2>
<ChildComponent ref="childRef"></ChildComponent>
<script><br>import ChildComponent from ' ./ChildComponent .vue'</p><p>내보내기 기본값 {<br> 이름: 'ParentComponent',<br> 구성 요소: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>ChildComponent</pre><div class="contentsignin">로그인 후 복사</div></div><p>},<br> Mounted() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>console.log('父组件实例已创建')</pre><div class="contentsignin">로그인 후 복사</div></div><p>}<br>}<br></script>
// 하위 구성 요소
< template>
<h2>子组件</h2>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
