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