원글 페이지 : 바로가기
📌들어가기 전 defineProps와 defineEmits와 같은 옵션을 선언하기 위해서는 📌defineEmits() 란? 자식 컴포넌트에서 부모컴포넌트로 데이터를 전달할 때 사용한다. 부모 컴포넌트에서 emits 옵션으로 이벤트를 정의하고, 자식 컴포넌트에서는 defineEmits를 사용하여 이벤트 목록을 정의한다.
📌defineProps() 와 defineEmits() 의 공통점 사용되는 변수 이름은 CamelCase가 아닌 kebab-case 사용을 권장한다. 전달된 옵션은 setup에서 모듈 범위로 호이스트 된다. 따라서 옵션은 setup 범위에서 선언된 로컬 변수를 참조할 수 없다. 참조할 시에 컴파일 에러가 발생한다. 하지만, import한 바인딩은 모듈 범위에 있으므로 참조할 수 있다. * 호이스트(Hoist) : 끌어올리기, 변수의 정의가 그 범위에 따라 선언관 할당으로 분리되는 것 <참고자료> https://ko.vuejs.org/api/sfc-script-setup.html#defineprops-defineemits Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org https://velog.io/@byebye62/Vue-script-setup%EC%97%90%EC%84%9C-%EB%B6%80%EB%AA%A8-%EC%9E%90%EC%8B%9D-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A3%BC%EA%B3%A0-%EB%B0%9B%EA%B8%B0-defineProps-defineEmits Vue script setup에서 부모, 자식 컴포넌트 데이터 주고 받기 (defineProps, defineEmits) vue는 단방향 data binding directive를 사용하는 것을 권장하는데, 단반향 data binding을 구현하기 위해 defineProps, defineEmits를 사용한다.defineProps는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 velog.io