예를들어 App.vue 부모 컴포넌트가 있고

File.vue라는 자식 컴포넌트가 있을 시

부모에 있는 데이터들을 File.vue인 자식에게 Props 시키고싶을때 

<!-- 기본 -->
<File :작명(또는데이터이름그대로)="데이터이름"/>

<!-- Array나 Object 그대로 보내기 -->
<File :데이터이름="[123,456]"/>

<!-- 간단한 문자열들은 v-bind문법없이도 바로 보낼수있다
	글자는 v-bind없이 바로바로 간다 -->
<File 데이터이름="안녕하세요문자자료"/>
<File :데이터이름="12344(숫자자료)"/>

<!-- Object 데이터들을 한번에 간단히 축약해서 보내는법 -->
<File :이름="오브젝트.name" :나이="오브젝트.age"/>

<!-- 이렇게 이름만 써도 됌. 한번에 보내는방법. -->
<File v-bind="오브젝트"/>

<!-- 또는 그냥 이렇게 보내도 똑같음 -->
<File :오브젝트="오브젝트"/>

component 만드는 방법

1. src나 아무데나 .vue로 끝나는 파일만듦

2. 그냥 처음 썼던 app.vue처럼 형식같게해서 내가 넣고싶은 html 넣음 스타일 줌 

3. script 부분에 이름을 줌 

4. css는 app.vue에 하나 여기 style에 넣나 똑같이 작동할거임 

축약해둔 컴포넌트 component를 만들었다면 갖다 쓸수있는방법 

1. vue 파일 import 해오고 (app.vue script의 맨 위에 import)

2. 등록하고 (import한거 밑에 component부분에 등록하기)

3. 쓰기 (template에 <어쩌구/>라고 갖다쓰는것)

반복적으로 출현하는 부분들만 component로 만들것....(온갖거 다 쓰지말고)

용어정리 

부모 컴퍼넌트 : 예) 가장 최상단의 App.vue

자식 컴퍼넌트 : 예) Slide.vue, Modal.vue

.vue의 naming을 할때는 기본적으로 맨앞을 대문자로 하고 길어질 경우 캐멀표기법을 쓴다

예를들면 This.vue 그리고 LikeThis.vue

자식컴포넌트인 예를들어 Modal.vue 파일로 가서

기존 App.vue에있던 template안에 데이터바인딩되있는채로 복붙시켜온다면???

component를 만들어두면 위에서 내가 쓰겠다고 데이터바인딩해둔게 이 파일안에 없기때문에 작동이안함.

무조건 밑에 script안에 있는것만 위에 template에 갖다쓸수있음.

component의 단점임. 데이터관리가 빡세짐

따라서 props를 써야한다

부모의 데이터를 자식이 갖다쓰고싶을때 쓰는 문법이 바로 Props

Props 쓰는 방법

1. 데이터 보내고 

<Slide/>안에 v-bind시킨다. 예) <Slide :데이터이름="데이터이름" />

2. 등록하고

Slide.vue로 가서 script쪽에 props만들어서 등록을한다 

3.쓰기

자식 컴포넌트에 자체적으로 스크립트안에 data를 넣어도 되긴하지만

부모가 쓰게될일이있다면 부모한테 만들어주는게좋음

많은 컴포넌트들이 쓴다면 그 중에 최상위 컴포넌트에 만들어두는게 간편함 

위로갖다쓰는건 props로 안됌 다른 문법 써야함

예시)

1. App.vue의 template안에서

<Modal :데이터이름="데이터이름" :Click="Click" :anotherData="thisIsData" />

연결시킬 Props가 많다면 그냥 이렇게 계속 v-bind시키면됌

v-bind 속성을 축약한게 :

1.5. App.vue의 Script 안에서

import Modal from './Modal.vue';


export default {
  name: 'App',
  // 컴포넌트 components를 만들었다면 밑에 쓰겠다고 등록해야함
  // es6 신문법으로 discount, 이렇게 하나만 써도 써지긴함
  components: {
    Modal: Modal,
  }
}

2. 자식컴포넌트인 Modal.vue의 Script 안에서

export default {
    name: 'Modal',
    props :{
        원룸데이터 : Object,
        누른거: Number,
        모달창열렸니: Boolean,
    }
}

이런식으로 name을 지정해주고

그 밑으로 Props들을 등록한다

부모컴퍼넌트에서 가져다쓸 데이터를 연결시키는 것
문자면 String, 숫자면 Number, 배열이면 Array, {요런거 들어간} 오브젝트면 Object, true/false면 Boolean..

틀리다고 오류뜨진않음

그리고 자식컴포넌트에서 props는 절대 막 수정하면안됨 read-only