[vuejs] 컴포넌트(component), Props, Custom Event

1. 데이터를 가져와서 출력하는 법

2. 이미지와 일치하는 모달창(modal screen)을 띄우기

3. 모달창 컴포넌트 사용

4. 상품 복록 반복문과 컴포넌트 사용

5. app.vue의 템플릿이 매우 짧아짐

6. 반복되어 사용되는 부분을 컴포넌트로 사용하면 좋다고 한다. import 해오면 내가 원하는 장소 아무 데나 사용가능.

 

1. 데이터를 가져와서 출력하는 법

(좌) : 데이터가 저장된 경로 / (우) : 데이터의 값

(좌) : 경로로부터 import 하여 data라는 변수로 지정, products라는 변수에 data 값 입력 / (우) : 가져온 데이터의 이름의 맞게 변수 수정

출력 이미지

2. 이미지와 일치하는 모달창(modal screen)을 띄우기

(좌) : 이미지를 클릭할 때 모달창의 전해지는 변수:누른상품번호 / (우) : 반복문이 실행될 때 누른상품번호 변수에 i 값을 저장

출력 화면

3. 모달창 컴포넌트 사용

(좌) : modal.vue 파일 생성 / (우) : 경로로부터 modal.vue import 변수는 Modal, components에 Modal 등록 

(좌) : 데이터를 :변수="데이터"를 사용해서 컴포넌트에 던짐 / (우) : 데이터를 props 로 받음 데이터 자료 형식에 맞춰 오브젝트, 블룸, 넘버 지정

데이터를 받는 자식 쪽에서는 데이터를 바꿀 수 없습니다. $emit('메시지')를 통해서 부모에게 요청을 하면 부모는 @메시지="함수 or 이벤트"를 통해서 데이터를 변환시키고 :변수="데이터" , props를 통해서 다시 데이터를 전달합니다.

 

 

닫기 버튼 클릭시 '모달창닫기' 메시지 부모에게 보냄

<button @click="$emit('모달창닫기')">닫기</button>

부모는 @모달창닫기를 실행 "모달창닫기()" 함수를 통해서 모달창열림 변수를 바꾸고 다시 자식에게 데이터 전송

<Modal :누른상품번호="누른상품번호" :products="products" :모달창열림="모달창열림" @모달창닫기="모달창닫기()"/>

 

4. 상품 복록 반복문과 컴포넌트 사용

(좌) : Card.vue 파일 생성 / (우) : 경로로부터 Card.vue import 변수는 Card, components에 Card 등록

(좌) : 데이터를 :변수="데이터"를 사용해서 컴포넌트에 던짐 / (우) : 데이터를 props 로 받음 데이터 자료 형식에 맞춰 오브젝트, 블룸, 넘버 지정

이미지 클릭시 '모달창열기' 메시지와 products.id 데이터를 부모에게 보냄

   <img :src="products.image" class="room-img"  @click="$emit('모달창열기',products.id)" />

신고 버튼 클릭 시 increase 메시지를 보냄

   <button@click="$emit('increase')"> 허위매물신고 </button>

부모는 @모달창닫기를 실행 "모달창닫기()" 함수를 통해서 모달창열림 데이터를 바꾸고 $event로 products.id 데이터를 받아서 누른 상품번호에 입력. 신고버튼 클릭 시 @increase를 실행 "increase(i)" 함수를 통해서 products [i]. fakeReport 변소를 바꾸고 다시 자식에게 던짐 

<Card v-for="(a, i) in products" :key="a":products="products [i]"@모달창열기="모달창열기(); 누른 상품번호=$event@increase="increase(i)"  />

5. app.vue의 템플릿이 매우 짧아짐

6. 반복되어 사용되는 부분을 컴포넌트로 사용하면 좋다고 한다. import 해오면 내가 원하는 장소 아무 데나 사용가능.

https://startatage30.tistory.com/10

[8화] OCI(오라클 클라우트 인스턴스) 방화벽 및 포트 셋팅