Vue3 Provide와 Inject를 활용하여 Prop Drilling를 해결하기

Provide와 Inject🗿 Prop Drillingprop drilling이란 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 props 를 사용하는데,규모가 큰 컴포넌트 트리가 있다면 자손 컴포넌트와 연관된 모든 자식들에게 props를 전달해야하는 것을 말함.(드릴로 뚫고 내려가는 것 같아서) 이러한 문제를 해결하는게 vue3의 provide와 injectprovide와 inject를 사용하면 부모의 데이터는 계층 구조 상관없이 전달 가능하다.  🗿 Provideexport default { setup() { provide('message', 'hello!'); },};상위 컴포넌트의 setup 함수 내부에서 provide 함수를 ..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 5. 11.
• textsms

Vue의 Non-Prop 속성 (fallthrough) 간단 정리 | 속성 상속 비활성화 방법

Non-Prop 속성 (fallthrough 속성) props 또는 event 에 명시적으로 선언되지 않은 속성 또는 이벤트를 말한다.예를 들면 class, style, id가 있다.  😄 속성 상속, 병합컴포넌트가 단일 루트 요소로 구성되어 있으면 non-prop 속성은 Root 요소의 속성에 자동으로 추가된다.즉, 자식 컴포넌트는 부모 컴포넌트의 요소를 상속받는다. 부모 컴포넌트에서 class와 style을 자식 컴포넌트 속성에 추가했을때자식 컴포넌트에 이미 class와 style 속성이 정의되어 있다면 병합한다. click me자식 컴포넌트에서 btn 클래스의 button 생성 부모 컴포넌트에서 large 클래스의 자식 컴포넌트를 가져왔다. click me렌더링된 최종 DOM자식 컴포넌트에 작성한..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 5. 8.
• textsms

Vue의 props 자식 컴포넌트로 데이터 전달 | 선언 방법 | Vue3의 setup 내에서 사용하기

propsprops는 컴포넌트에 등록할 수 있는 사용자 정의 속성이다.사용자 정의 속성을 선언하면 이 컴포넌트를 사용하는 부모 컴포넌트에서 데이터(속성)를 전달할 수 있다.  😆 props 선언선언 방법1. 문자열 배열 선언props: ['title'] 컴포넌트에 props 옵션을 사용하여 선언  선언 방법2. 객체 문법 선언props: {title: String, likes: Number} 객체 문법을 사용하여 속성 타입과 함께 선언 모든 기본 생성자 또는 사용자 정의 타입을 정의할 수 있다.  😆 props 속성default : 기본값 선언, 속성값이 비어있거나 undefined를 전달 받는 경우 기본값 사용.requied : 속성이 필수 값이라면 true로 설정validator : 유효성 검사,..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 5. 5.
• textsms

Vue의 event emit 부모 컴포넌트로 데이터 전달 | Vue3의 emit 옵션 선언

event emitevent emit이란 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달 또는 트리거의 목적으로 이벤트를 내보내는 것이다. 이벤트는 컴포넌트의 emit 메서드를 통해서 발생시킨다. 🌈 event 발생 및 수신 버튼 자식 컴포넌트에서 내장 함수 $emit('이벤트명')을 통해 이벤트를 발생시킨다. 부모 컴포넌트에서 @이벤트명='메서드명' 를 통해서 이벤트를 수신한다.  🌈 event 선언vue3에서는 emits 옵션을 통해 이벤트를 선언할 수 있다.이벤트를 선언하는건 선택사항(선언안해도 동작한다)하지만 컴포넌트의 문서화를 위해서는 이벤트 정의하는 것이 좋다.또한 non-prop(fallthrough) 속성을 활하려면 이벤트를 정의해야한다. 선언 방법1. event 문자열 배열..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 5. 2.
• textsms

Vue3 양방향 바인딩 (v-model) 응용 간단 정리 | 컴포넌트간 바인딩, computed 활용, 다중 바인딩

컴포넌트간 양방향 바인딩 (v-model)컴포넌트 간 v-model을 적용하려면 update:modelValue와 modelValue를 활용한다.  😉 v-model 기본 동작v-model의 기본 동작으로는 value를 바인딩하고,@input 이벤트로 데이터를 변경하는 방법이다.   이러한 동작은 v-model 로 간단하게 적용할 수 있다.  😉 컴포넌트간 v-model 기본 동작 username = newValue"/>위에 v-model의 기본 동작처럼 부모 컴포넌트에서 value로 데이터를 보내고, 자식 컴포넌트에서 발생한 input 이벤트로 데이터를 받도록 하면 된다.  {{ label }}  단, 이처럼 동작시키기 위해서는 자식 컴포넌트에서 props와 ..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 4. 29.
• textsms