전체 글 (445) 썸네일형 리스트형 hands on vue - slot에 데이터 넘겨주기 [목표] 1. 자식컴포넌트의 일부분을 부모컴포넌트 요소를 보이게 하는 slot에 대해 알아보았다. 자식 컴포넌트에서만 사용하는 데이터를 부모 컴포넌트에도 넘겨주면 어떨까? 수정 전 소스를 갖고 다음과 같이 구현해보기 파란 부분은 부모에서 작성한 것이다. 파란 박스 밑은 자식에서 작성한 것이다. 힌트는 두개 드림 자식에서 을 사용하는 것이고 부모에서 [수정전 - main.js] import { createApp } from 'vue'; import App from './App.vue'; import BaseBadge from './components/BaseBadge.vue'; import BaseCard from './components/BaseCard.vue'; const app = createApp(.. hands on vue - slot에 대해 더 알아보자 [목표] 1. slot을 설정했는데 만약 슬롯이 없다면 어떻게 될까? slot을 설정했는데 slot 부분이 없다면 렌더링을 할까? slot을 설정했는데 없다면 if문으로 분기 태워서 넘어가게 할 수 있을까? 키워드 - - - console.log(this.$slots.header) - console.log(this.$slots.header)를 해보았다. 콘솔에는 하나밖에 안찍힌다. 슬롯은 두갠데 ... 왜 하나만 찍힐까 졸려서 힘이없다... 나중에 알아보도록 한다.. UserInfo > BaseCard(자식) 이 있다 자식 컴포넌트에 slot을 해놓았지만 부모 컴포넌트에서 아무것도 설정을 안해도 개발자도구로 확인하면 header부분이 렌더링이 되어있다. 만약 렌더링을 하고싶지 않다면 어떻게 해야할까 v-.. hands on vue - slot 여러개 해보기 [목표] 1. 부모의 컴포넌트를 자식컴포넌트에서 사용하는 slot에 대한 이해를 해보았다. 그런데 slot이 여러개라면 어떻게 해야될까? 힌트 - - 바로 전 포스팅 소스와 동일한 소스는 올리지 않았음 [UserInfo.vue] {{ fullName }} {{ infoText }} [BaseCard.vue] 는 slot에 name 설정 안해놓은 걸로 설정된다. hands on vue - slot의 이해 (연습문제) [목표] 1. 부모의 요소를 자식 컴포넌트에서 바로 사용할 수 있는 slot에 대한 이해를 높여보자 [수정전 - App.vue] [수정 전- BadgeList.vue] Available Badges [수정 전 - BaseBadge.vue ] {{ caption }} [수정전 - TheHeader.vue] More on Vue Components [수정전 - UserInfo.vue] {{ fullName }} {{ infoText }} [수정전 main.js] import { createApp } from 'vue'; import App from './App.vue'; import BaseBadge from './components/BaseBadge.vue'; const app = createApp(App.. hands on vue - scoped 스타일 적용 [목표] 1. 컴포넌트 내에서만 스타일 적용시켜보기 hands on vue - component의 global, local 이해(연습예제 고민하고 풀기!) [목표] 1. component를 모두 global로 했을 경우 한번밖에 안쓰는 녀석들도 계속해서 불러오는 현상이 생길 수 있다. 이러한 현상은 메모리를 차지해 느리게 한다. 따라서 local에서만 사용하는 것이 무엇인지 판단하고 global, local 컴포넌트를 나누어보자 직접 판단하쇼 최소 20분은 고민하쇼 [수정전 - App.vue] [수정전 -BadgeList.vue] Available Badges [수정전 - BaseBadge.vue] {{ caption }} [수정전 - TheHeader.vue] More on Vue Components [수정전 - UserInfo.vue] {{ fullName }} {{ infoText }} [수정 전 - main.js] import { createApp .. hands on vue - 부모의 손자에게 바로 다이렉트로 값 보내기(provide&inject) [목표] 1. props와 emit를 연달아 사용하여 자식의 자식의 자식... 에게 함수 혹은 데이터를 보내지 않고 다이렉트로 보내는 방법에 대해 익숙해져 보자 원래는 이런식으로 보낸다 하지만 provide & inject를 사용하면 다음 그림과 같다 수정 전과 후의 소스를 비교하여 연습하자 [수정전 - App.vue] [수정전 KnowledgeBase.vue] Select a Topic [수정전 KnowledgeGrid.vue] [수정전 KnowledgeElement.vue] {{ topicName }} {{ description }} Learn More [수정전 ActiveElement.vue] {{ topicTitle }} {{ text }} [수정전 main.js] import { createAp.. hands on vue - emit 연습문제 (@submit.prevent, emit, vue.component ) [목표] 1. 부모 - 객체 간의 데이터 전달에 필요한 기능들을 익숙해져 보자 1-1) @submit.prevent란 무엇인가 1-2) App.vue(부모)에서 컴포넌트 형식으로 사용하려면 어떻게? 1-3) emit를 하기위한 순서는? 1-1) @submit.prevent란 무엇인가 form 태그 사용시 페이지가 넘어가는 동작을 한다. 이것을 막아주는 기능이다. 1-2) App.vue(부모)에서 컴포넌트 형식으로 사용하려면 어떻게? 1st: main.js에서 등록한다 import { createApp } from 'vue'; import App from './App.vue'; import FriendContact from './components/FriendContact.vue'; import NewFr.. 이전 1 ··· 45 46 47 48 49 50 51 ··· 56 다음
