반응형 Ref2 Vue.js Composition API 알아보기 Composition API 컴포넌트에서 사용하는 특정 기능의 코드를 유연하게 구성할 수 있는 함수 기반의 API Vue3에서 가장 중요한 핵심 기능 [기존]개발 방식은 연관성 있는 로직들이 data, computed, methods 등에 흩어져 있어서 프로젝트 규모가 커질수록 관리, 추적에 어려움 => Composition API의 setup()을 사용하여 관련 코드들을 묶어서 구현할 수 있어서 코드 관리, 추적이 용이 [기존] Mixin을 통한 컴포넌트 기능 재사용 부분도 오버라이딩 문제나 다중 Mixin 상속 시 컴포넌트 관리가 어려워 짐 => Composition API를 통해서도 공통기능 제공 가능 setup() 메소드 - 샘플 코드 {{ count }} {{ countDouble }} Plus.. 2022. 4. 3. Vue.js refs로 자식컴포넌트, html 엘리먼트 접근 refs 자식컴포넌트나 일반적인 html 엘리먼트에 직접 접근 가능(getElimentById, querySelector 등 과 유사) 컴포넌트가 랜더링이 된 이후 적용되기 때문에 반응형으로 구성하기 위한 computed, template 에서 사용 제약 ref 속성과 $refs 키워드를 통해서 사용 ... // $refs를 사용해서 접근 this.$refs.child_component this.$refs.test_input 자식 컴포넌트 샘플 코드 테스트용 자식 컴포넌트 코드를 간단하게 작성한다 Child 클릭 이벤트 버튼 {{ msg }} 부모 컴포넌트 샘플 코드 부모컴포넌트가 mounted 되었을 때 간단히 엘리먼트 정보를 콘솔로 한번 조회하고, input 엘리먼트에 focus를 준다. 그리고 "테.. 2022. 4. 2. 이전 1 다음 반응형
