slot2 24. Vue - slot 태그 - 이전 포스팅에서 slot태그를 이용하여 컴포넌트 내용을 출력하였다. - 이번 포스팅에서는 slot태그에 관하여 조금 더 알아보자. 1. Fallback content [App.vue] Banana [MyBtn.vue] ㅌ [작동순서] a) slot 태그 사이에 내용이 있는 경우 [출력화면] - 반드시 컴포넌트에 내용(=content)을 삽입해야만 slot태그에서 출력이 되는 것이 아니다. - 위의 예시처럼 slot 태그 자체에 내용(=content)을 삽입하여 출력할수도 있다. b) slot 태그 사이에 내용이 있고 컴포넌트에도 내용이 있는 경우 [출력화면] - 컴포넌트와 slot태그 모두 content를 포함하고 있는 경우, 위의 예시처럼 컴포넌트의 내용이 우선적으로 출력된다. - slot 태그에 .. 2021. 5. 25. 20. Vue - 컴포넌트 기초(props, slot) 0. 예제코드 a) App.vue b) MyBtn.vue Apple 1. 컴포넌트의 재활용 - 한번 만들어 놓은 컴포넌트는 재활용이 가능하다는 점이 Vue의 장점 중 하나다. - 컴포넌트를 만들어 놓고 해당 태그를 복사 붙여넣기만 하면 간단하게 재활용 할 수 있기 때문이다. a) props - 기본적인 구조는 복사해서 사용한다고 해도 약간의 변화를 주고싶다면 어떻게 해야할까? - 그럴 때 사용할 수 있는 옵션이 props다. - 다음 예제 코드를 보면서 알아보자. [App.vue] [MyBtn.vue] - style 부분 생략 Apple 1. 첫번째 포인트 - MyBtn.vue에서 props를 정의한 부분을 살펴보자. - color라는 속성을 정의하였다. type은 입력값의 형태를 의미하며, defau.. 2021. 5. 21. 이전 1 다음
