반응형

2024/02/04 2

22. Non-Prop 속성 (fallthrough 속성)

Non-Prop 속성 (fallthrough 속성) Non-Prop 속성은 props 또는 event에 명시적으로 선언되지 않은 속성 또는 이벤트 입니다. 예를 들어 class, style, id와 같은 것들이 있습니다. 속성 상속 컴포넌트가 단일 루트 요소로 구성되어 있으면 fallthrough 속성은 루트 요소의 속성에 자동으로 추가됩니다. 예를들어 이라는 컴포넌트가 있다고 가정해보겠습니다. 그리고 이 컴포넌트를 사용하는 부모 컴포넌트는 다음과 같습니다. 최종 렌더링된 DOM은 다음과 같습니다. 최종 렌더링은 자식 컴포넌트의 루트 엘리먼트에 이렇게 상속됩니다. 루트 엘리먼트란? 컴포넌트의 template 태그 속에서 제일 상위 요소입니다. 예: template 바로 밑에 있는 div가 루트 엘리먼트 ..

21. Events

Events 자식 컴포넌트에서도 부모 컴포넌트로 데이터를 전달 또는 트리거의 목적으로 이벤트를 내보내는것을 말합니다. 그리고 이벤트는 컴포넌트의 emit 메서드를 통하여 발생시킬수 있습니다. 이벤트 발생 및 수신 컴포넌트의 블록 안에서 내장 함수 $emit()을 사용하여 직접 커스텀한 이벤트를 내보낼 수 있습니다. 그러면 부모 컴포넌트에서 v-on(또는 @)을 사용하여 이벤트를 수신할 수 있습니다. .once 수식어는 컴포넌트 커스텀 이벤트에서도 지원됩니다 이벤트 파라미터 이벤트와 함께 특정 값을 내보낼 수 있습니다. $emit 함수 이벤트명에 추가로 파라미터를 넘길 수 있습니다. 그런다음 부모 컴포넌트에서 이벤트와 함께 파라미터를 받을 수 있습니다. 이벤트 선언하기 Vue2와 다르게 Vue3에는 emi..

반응형