jhhan의 블로그

Vue.js에 대해서 적어보는 포스트입니다. 이번에는 제목처럼 slot 문법에 대해서 알아보겠습니다. 컴포넌트끼리 데이터를 전달하기 위해서, 특히 부모컴포넌트에서 자식컴포넌트로 데이터를 전달하려면 반드시 props를 사용해서 진행해야 합니다. 참고로 props 사용법입니다. // 부모 컴포넌트 // 자식 컴포넌트 // Example.vue 부모 컴포넌트에서 전송하고, 자식 컴포넌트에서 받아서 사용합니다. 정확하게 단계로 알아본다면 부모 컴포넌트에서 전송 자식 컴포넌트에서 받기 + 등록 자식 컴포넌트에서 사용 대략 3가지 단계입니다. 하지만 이런 단계들이 귀찮다고 여길 수도 있습니다. 이런 귀찮음을 해소해주는 문법이 바로 slot 문법입니다. // 부모 컴포넌트 테스트 // 자식 컴포넌트 - Example..

이번에는 컴포넌트에 대해 알아보겠습니다. 뷰에서는 화면 분할을 사용할 때 컴포넌트라는 개념을 사용해서 분할합니다. 그래서 보다 직관적으로 코드를 이해할 수 있습니다. 코드를 살펴보겠습니다. 저는 이런식으로 컴포넌트를 구성했습니다. global-component는 전역 컴포넌트 my_component는 지역 컴포넌트 parent-component는 부모-자식 관계에 있는 컴포넌트 입니다. 전역 컴포넌트부터 살펴보겠습니다. 전역 컴포넌트는 전역 변수처럼 어디에서든지 쓰일 수 있는 컴포넌트입니다. import GlobalComponent from "./components/global-component"; 처럼 선언을 한 후 해당위치에 vue파일을 만들어줍니다. 이제 global-component 파일을 보겠습..