script setup
-
[Composition API] Typescript 적용하기 (script setup)Frontend/Vue3 2023. 3. 12. 16:34
Typing Component Props Props는 상위 컴포넌트(부모)에서 하위 컴포넌트(자식)로 데이터를 넘겨줄 때 사용합니다. Props Default Values default props값을 지정하는 방법입니다. Typing Component Emits Emits는 하위 컴포넌트(자식)에서 상위 컴포넌트(부모)로 이벤트, 데이터를 넘겨줄 때 사용합니다. Typing ref() ref는 초기값으로 타입을 추론하는 기능이 기본적으로 내장되어 있습니다. import { ref } from 'vue' // inferred type: Ref const year = ref(2023) // => TS Error: Type 'string' is not assignable to type 'number'. yea..
-
[Composition API] Vue3 Slots 사용하기(script setup)Frontend/Vue3 2022. 12. 31. 21:57
1. 사용 배경 부모 컴포넌트 템플릿과 자식 컴포넌트 템플릿 사이 데이터(slot content) 통신 후 화면 랜더링을 원할 경우 사용합니다. 2. 파일 구조 프로젝트 파일 구조 독자분들의 이해를 돕기 위해 프로젝트 생성 시 자동으로 구성되는 프로젝트 구조를 그대로 사용하겠습니다. 3. 구현 과정 (App.vue와 main.js 파일은 전혀 손대지 않았습니다.) 1) 부모 컴포넌트 템플릿 -> 자식 컴포넌트 템플릿 방향으로 데이터를 전송하는 경우 우선 자식 컴포넌트인 HelloWorld.vue 파일입니다. //HelloWorld.vue 버튼 클릭 -> 부모 컴포넌트 HomeView.vue로 data 전송 //HomeView.vue {{ data }} 부모 컴포넌트 HomeView.vue -> 자식 컴포..
-
[Composition API] Vue3 Emit 사용하기(script setup)Frontend/Vue3 2022. 12. 31. 18:51
1. 사용 배경 Emit는 하위 컴포넌트(자식)에서 상위 컴포넌트(부모)로 이벤트로 데이터를 넘겨줄 경우 사용합니다. 2. 파일 구조 프로젝트 파일 구조 독자분들의 이해를 돕기 위해 프로젝트 생성 시 자동으로 구성되는 프로젝트 구조를 그대로 사용하겠습니다. 3. 구현 과정 (App.vue와 main.js 파일은 전혀 손대지 않았습니다.) 자식 컴포넌트인 HelloWorld.vue 파일부터 보겠습니다. //HelloWorld.vue Submit 버튼을 클릭하면 "data"가 이벤트로 전달되는 로직입니다. 페이지에 Submit 버튼을 누르면 부모 컴포넌트로 데이터가 넘어갑니다. //HomeView.vue @submit을 통해 하위 컴포넌트에서 넘어오는 데이터를 받아 emitTest 함수의 파라미터 값으로 전..
-
[Composition API] Vue3 Props 사용하기(script setup)Frontend/Vue3 2022. 12. 25. 16:12
1. 사용 배경 Props는 상위 컴포넌트(부모)에서 하위 컴포넌트(자식)로 데이터를 넘겨줄 경우 사용합니다. 2. 파일 구조 독자분들의 이해를 돕기 위해 프로젝트 생성 시 자동으로 구성되는 프로젝트 구조를 그대로 사용하겠습니다. 3. 구현 과정 (App.vue와 main.js 파일은 전혀 손대지 않았습니다.) 부모 컴포넌트인 HomeView.vue 파일에서 자식 컴포넌트인 HelloWorld.vue 파일을 import 해서 사용하는 로직입니다. 여기서 msg에 들어가는 내용이 자식 컴포넌트인 HelloWorld.vue 파일로 전달됩니다. 자식 컴포넌트에서는 defineProps를 import 해주고 props라는 객체를 만들어 전달된 데이터를 받습니다. {{ props.msg }} 위와 같이 templ..