[ Vue.js ] Component & props 사용 방법

 

1 .  컴포넌트 만들기

---

✔ components 폴더에 .vue 파일 생성 

 

✔ template, script 작성하기

→ 디버깅할 때 name 속성을 통해 확인할 수 있으므로 name을 정해주는 것이 좋다

 

 

 

2 . 컴포넌트 사용하기

---

✔ impor 

→  App.vue 에서 만들어 놓은 HelloUser 컴포넌트를 import 해준다.

 

 

✔  컴포넌트 등록

→  컴포넌트를 사용하기 위해서는 컴포넌트 등록이 필요하기 때문에 components 오브젝트 안에 key: value 형태롤 컴포넌트를 등록해 준다. (key와 value 값이 같은 경우 하나로 생략해서 작성하면 된다.(ES6 문법)) 

 

 

✔   컴포넌트 사용

→  template 태그 안에 사용할 컴포넌트 태그를 작성한다.

 

✔  화면 출력

→ HelloUser에 작성한 '컴포넌트 사용하기' 문구를 App 컴포넌트에서 사용하여 출력할 수 있다.

 

 

3. 컴포넌트 재사용하기

---

→ 동일한 컴포넌트 태그를 여러번 작성하여 재사용할 수 있다.

 

 

 

 

4. 컴포넌트에 prop 넘기기

---

📌 prop을 넘기는 쪽 컴포넌트는 부모 컴포넌트라하고, prop 받는 컴포넌트를 자식 컴포넌트라고 한다.
📌  prop을 넘겨받은 자식 컴포넌트에서는 prop의 값을 가공할 수 없다.

 

✔   prop 넘기는 방법

→  컴포넌트에 넘겨 줄 데이터는 데이터 이름 = "보낼 데이터" 형태로 작성한다.
ex) item = "vue"
→  데이터 이름은 prop을 받을 컴포넌트에서 설정한 데이터 이름이다.

 

 

✔  넘어온 prop을 받는 방법 

→ export default 안에 props 라는 오브젝트를 만들고  그 안에 데이터명 : 데이터타입을 설정해 준다.
→  template에 머스타치 문법을 사용하여 props의 데이터명을 작성한다.

 

✔  화면 출력

→  App.vue에서 넘겨준 prop을 확인할 수 있다.

 

 

 

 

5. v-bind (:) 를 사용하여 prop 넘기기

---

📌 부모 컴포넌트에서 data 또는 computed에 변수를 선언하면 해당 데이터를 v-bind를 통해 넘겨줄 수 있다.

→ data 에 key : value 형식으로 데이터를 넣어준 후

    template에 <자식 컴포넌트명 :prop명="data에 선언한 변수명" />을 추가해서 사용할 수 있다. 

 

 

✔  화면 출력

 

 

6. props 기본값 설정하기

---

✔ default 값이 없는 props 

 

✔ default 값이 있는 props

→  prop없이 컴포넌트를 사용할 때 기본 prop 값을 설정할 수 있다.
→  prop 오브젝트를 열고, type과 default vaule를 설정하여 사용한다.

props : {
    prop이름 : {
    데이터 타입 : 타입,
    default : 데이터
    }
}

 

✔  화면 출력

 

참고 : 유튜브 데브리 vue3 강좌