자식 컴포넌트에 데이터 전달하는 2가지 방법
- props로 전달
- slot 사용: 여는 태그, 닫는 태그 사이에 또 다른 태그를 넣어준다. 해당 자식 컴포넌트에 가서 새로 추가한 태그가 들어올 자리를 <slot>이라고 적는다.
<div>
<table-component>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table-component>
</div>
<!-- TableComponent.vue -->
<table>
<slot />
</table>
- slot을 여러 개 사용할 수도 있고, slot에 이름도 줄 수 있고, slot 기본값도 설정할 수 있다.
- 슬롯을 사용하는 장점?
slot에 들어가는 태그들에 사용되는 메소드나 데이터들은 다 부모 컴포넌트에 있다. 즉 부모 컴포넌트의 데이터, 메소드, computed 등에 접근할 수 있다는 것이 장점! -> IoC현상(inversion of control: 원래 자식 컴포넌트에서 컨트롤 되어야 했을 것들을 부모 컴포넌트에서 컨트롤한다)
Author And Source
이 문제에 관하여(자식 컴포넌트에 데이터 전달하는 2가지 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lyj-ooz/자식-컴포넌트에-데이터-전달하는-2가지-방법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)