[Vue] #7 - 컴포넌트

1. 다른 vue파일 import해오기

1. vue파일 만들어서 HTML만들기
2. 원하는 곳의 script태그 사이에

import 이름 from '경로';

1. export default안의 component에

쓸 이름: 가져온 이름 => DC : Discount or 같은이름 쓸거면 이름 하나만 적어도됨 => Discount

1. < Discount />로 사용하기

2. props : 부모가 가진 데이터를 쓰고 싶을 때

App.vue에 쓰인 <DIscount />는 App의 자식 컴포넌트임

props로 자식에게 데이터 보내는 법
1. 데이터 전송
밑에 데이터 골라서 보내기
<자식 :작명데이터="보낼데이터" /> or <자식 v-bind:작명데이터="보낼데이터" />
=> :작명데이터="보낼데이터" :작명데이터2="보낼데이터2" 여러개 나열 가능
2. 자식은 props로 받은 데이터 등록
props : {
작명한 데이터 : 자료형이름, //Array, Number 등등
} // 자료형은 디버깅용으로 적는거임
3. 사용

⚠주의⚠ props는 read-only라서 받아온거 수정 X

ex) <button @click="모달창열렸니 = false">닫기
모달창열렸니 라는 데이터가 수정돼서 에러남

애초에 자식컴포넌트에 데이터를 만들면 되지않나?

되기나는데 부모도 써야할 데이터라면 부모에 만들어주는게 좋다
위로 전송은 어렵다

3. 컴포넌트 안에는 하나의 카드만 구현하고 부모컴포넌트에 를 여러개 쓰는 방식으로 쓰자 !

<Card :원룸="원룸들[i]" v-for="(원룸,i) in 원룸들" :key="i" />

이런식으로 for문을 사용하자