기록

보통 부모-자식 컴포넌트 간에 통신에는 props와 $emit을 이용합니다. 하지만 아래 코드에서는 ref를 사용하여 자식컴포넌트의 데이터를 가져왔는데 동적으로 자식 컴포는트가 교체되는 모달에서 공통으로 필요한 기능인 getData 버튼을 부모 컴포넌트에 위치시켰기 때문입니다. 부모에서 $emit -> 자식에서 $emit -> getData 이런식으로 해도 될 것 같긴한데 코드가 어지러워서 ref를 이용하는 방식을 사용해봤습니다. Get Data from QueryLst 위의 예시에서 자식컴포넌트의 인스턴스에 접근하기 위해 this.$refs.childComp를 사용하고, 이를 통해 자식 컴포넌트의 data 속성에 접근하여 데이터를 가져오고 있습니다. 다만, ref를 사용하여 자식 컴포넌트의 인스턴스에 ..

ref ref는 Vue 3의 Composition API에서 제공되는 함수 중 하나로, 반응성(Reactivity)을 적용할 수 있는 변수를 생성합니다. ref 함수를 사용하여 생성된 변수는 값이 변경될 때마다 자동으로 해당 값을 참조하는 컴포넌트를 다시 렌더링하도록 만들어줍니다. 이를 통해 컴포넌트 내부의 데이터가 변경될 때마다 뷰(View)도 자동으로 업데이트되게 됩니다. ref 함수를 사용하여 변수를 생성하면, 해당 변수는 객체로 감싸지게 됩니다. 이는 Vue 3의 반응성 시스템이 객체의 프로퍼티 변경을 추적하기 위함입니다. 따라서 ref 함수를 사용하여 생성된 변수를 읽을 때에는 .value를 사용하여 내부의 값에 접근해야 합니다. ref 함수는setup 함수에서만 사용할 수 있습니다. 따라서 r..