🔍슬롯(Slot)이란? 슬롯은 컴포넌트를 보다 디테일하게 활용할 수 있도록 하는 도구이다. (=기존 컴포넌트 재사용성을 높여줌) 컴포넌트에 콘텐츠 혹은 다른 컴포넌트를 또다른 방식으로 주입시킬 수 있는 방법 🔍슬롯 기본 예제 Slot은 부모 컴포넌트에 특정 문법에 따라 쓰인 html 코드를 자식 컴포넌트에 보내는 역할을 함. 부모 컴포넌트인 About.vue에 아래 코드를 작성 한다. 그럼 자식 코드의 slot 태그 위치에 해당 코드가 추가되어 로드된다. 만약 slot을 두 개 만들고 각기 다른 자리에 html 코드를 넣고 싶다면 slot에 이름을 붙여주면 된다. 그럼 header 이름을 가진 slot 태그에 해당 코드가 추가되며 만약 default로 지정할 경우 이름이 정해지지 않은 곳에 추가됨. 만약..

🔍부모로부터 props를 받는 자식 컴포넌트 작성 자주 사용하는 스타일을 별도 자식 컴포넌트 InputField.vue로 분류하였다. 🤍부모 컴포넌트 Home.vue InputField를 불러오고 자신의 data인 name을 name 속성으로 (:name) 바인딩하여 props로 내려줌. 🤍자식 컴포넌트 InputField.vue props로 name을 받아와서 input의 value 속성으로 바인딩. => 부모 컴포넌트로부터 props로 받아온 name 값은 input의 value 값으로 지정되지만, 사용자가 input box에 입력한 값은 props.name 값으로 지정되지 않음. 이를 해결하기 위해서 @input 속성을 사용할 수 있다. 🤍@input @input을 이용하며 input 태그에 입력되..