이 컴포넌트 내장 API들은 컴포넌트 내부의 특정 기능 수행, 상태 접근에 사용된다.

주요 $ 속성과 메서드

1. $data:
   • 컴포넌트의 모든 반응형 데이터를 포함하는 객체입니다.
   • 예: this.$data로 컴포넌트 내의 모든 데이터를 확인할 수 있습니다.
2. $props:
   • 부모 컴포넌트로부터 전달된 props를 나타내는 객체입니다.
   • 예: this.$props로 모든 props에 접근할 수 있습니다.
3. $emit:
   • 부모 컴포넌트에 이벤트를 전달하기 위해 사용합니다.
   • 자식 컴포넌트가 this.$emit('eventName', payload)를 호출하면 부모 컴포넌트에서 해당 이벤트를 청취할 수 있습니다.
4. $refs:
   • ref로 정의된 DOM 요소나 자식 컴포넌트 인스턴스에 접근할 때 사용합니다.
   • 예: this.$refs.myInput으로 특정 DOM 요소를 직접 참조할 수 있습니다.
5. $el:
   • 현재 컴포넌트의 루트 DOM 요소를 참조합니다.
   • 예: this.$el은 컴포넌트의 최상위 HTML 요소를 가리킵니다.
6. $watch:
   • 특정 데이터나 props가 변경될 때 실행할 콜백 함수를 등록할 때 사용합니다.
   • 예: this.$watch('count', (newValue, oldValue) => { ... })
7. $nextTick:
   • DOM 업데이트가 완료된 후에 콜백을 실행할 때 사용합니다.
   • 비동기 DOM 업데이트가 필요한 경우 this.$nextTick(() => { ... })으로 실행됩니다.
8. $router:
   • Vue Router를 사용할 때 현재 컴포넌트에서 라우터 인스턴스에 접근할 수 있게 합니다.
   • 예: this.$router.push('/new-route')으로 라우팅을 변경할 수 있습니다.
9. $store:
   • Vuex를 사용하는 경우 전역 스토어 인스턴스에 접근할 수 있습니다.
   • 예: this.$store.state.property로 상태에 접근하거나 this.$store.commit('mutationName')으로 변이를 호출할 수 있습니다.