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

Vue의 양방향 바인딩 (v-model) 간단 정리 | 수식어

양방향 바인딩v-model입력 양식을 처리할 때 입력 요소의 상태와 자바스크립트의 상태를 동기화 해야하는 경우,value를 바인딩하고 @input 이벤트로 text를 변경하는 것 같은 양방향 바인딩을 해준다. text = event.target.value" />  요소에 따라 다르게 동작하는 v-model v-model은 내부적으로 어떤 html 요소냐에 따라 다른 속성(:value)과 이벤트(@input)을 사용한다. (1) input type="text", textarea일 경우value 속성과 input 이벤트 역할을 한다. (2) checkbox, radio일 경우checked 속성과 change 이벤트 역할을 한다.또한 checkbox일 경우 boolean이 아닌 다른 값('Y', 'N')을 바..

• format_list_bulleted Vue
• · 2024. 4. 26.
• textsms

Vue에서의 이벤트 처리 | 다양한 이벤트 수식어

이벤트 처리이벤트 처리는 v-on 디렉티브를 사용단축 표현으로 @ 으로 사용메서드의 첫번째 매개변수는 event 객체  🎉 $event 인라인 핸들링에서 event 객체를 접근하려면 $event 키워드 활용한다.  🎉 이벤트 수식어이벤트를 조작할 때 v-on의 이벤트 수식어로 더 효율적으로 이벤트 메서드 호출(1) .stop 는 event.stopPropagation() → 이벤트 전파(캡쳐~버블링) 막기(2) .pervent 는 event.preventDefault() → 기본 기능 막기(3) .capture 는 캡처 모드를 사용할 때 이벤트 리스너를 사용 가능(4) .self 는 오로지 자기 자신만 호출할 수 있음. 즉 타깃 요소가 self일때 발동된다.(5) .once 는 해당 이벤트는 한 번만..

• format_list_bulleted Vue
• · 2024. 4. 25.
• textsms