개발 웹 개발
D
dev_to

Vue 컴포넌트 간 데이터 전달: 자식 -> 부모

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Vue.js를 사용하는 웹 개발자, 특히 컴포넌트 간 데이터 전달에 관심 있는 초급~중급 개발자

핵심 요약

  • defineEmits() 사용으로 자식 컴포넌트에서 이벤트 정의
  • emit('이벤트명', 데이터)로 부모에게 데이터 전달
  • 부모는 @이벤트명으로 이벤트를 감지하고 핸들러 메서드 정의
  • props와 emit은 컴포넌트 기반 개발의 핵심 패턴

섹션별 세부 요약

1. 자식 컴포넌트에서 이벤트 정의 및 발생

  • defineEmits()로 이벤트 이름 정의 (예: ['child-data-sent'])
  • emit 함수를 통해 이벤트 발생 (예: emit('child-data-sent', '메시지'))
イベントを発行 (emit) コンポーネント データ連携 親コンポーネント 子コンポーネント Vue props emit データ受渡し コンポーネント指向開発. Translating those to Korean: 이벤트 발생 (emit) 컴포넌트 데이터 연동 부모 컴포넌트 자식 컴포넌트 Vue props 데이터 전달 컴포넌트 기반 개발. But the original content's summary uses terms like defineEmits() emit() @이벤트명. So maybe the keywords should be in Korean. Let me list them as: emit 컴포넌트 데이터 전달 부모 컴포넌트 자식 컴포넌트 Vue props 컴포넌트 기반 개발. That's 8 keywords which is within the 5-7 range. Maybe trim to 7: emit 컴포넌트 데이터 전달 부모 컴포넌트 자식 컴포넌트 Vue props.
목록으로 원문 보기