- vue 파일 import
컴포넌트 파일 안 스크립트 쪽에서 반드시 name을 작성해줘야한다.(보통 파일명을 작성해야한다.)
그리고 컴포넌트.vue 이름은 2단어 이상으로 작성해줘야한다.
(ex. DiscountBanner.vue)
<script>
export default {
name:'DiscountBanner',
}
</script>- 등록하고
components: {
DiscountBanner : DiscountBanner,
// 오른쪽은 내가 import한 파일 작명한 이름
// 왼쪽은 내가 어떻게 작명을 하겠다.
왼쪽과 오른쪽이 같다면 DiscountBanner 한 단어만 적어도 된다.
}
- 쓰삼
<DiscountBanner />!! 반복적으로 화면에 출현하는 부분만 컴포넌트화 하기를 권장한다.
Props
데이터는 보통 한 곳에 보관하여 필요하면 가져다 쓴다. 이를 Props라고 한다.
- 자식컴포넌트(모달컴포넌트 등)가 부모(App.vue)가 갖고있는 데이터를 쓰려면 Props로 데이터를 전송해야한다.
- 받아온 Props는 read-only이다. 수정이 불가능하다.(예를 들면 true를 false로 바꾼다든가)
- 자식이 부모컴포넌트에 있는 데이터를 수정하고싶다면? Custom event를 쓰자.(아래 자세히 기록)
- 자식컴포넌트에도 data를 만들 수는 있지만 만약 부모컴포넌트에도 쓰이고 다른 컴포넌트에도 많이 쓰이는 데이터라면 대빵컴포넌트(최상위 컴포넌트)인 App.vue에 data를 저장하는 것이 좋다.(위에서 아래로는 props를 쓰면 되지만 그 반대는 어려움)
방법 (외우자!!!!)
- App.vue안에 있는 data 보내고
v-bind가 : 임자식컴포넌트명 : 데이터 = "데이터"
왼쪽 데이터는 작명이 가능하긴하지만 보통 동일하게 작성한다.
띄어쓰기 유의할 것.
<ModalPage :원룸들="원룸들" :누른거="누른거" :모달창열렸니="모달창열렸니" />- 등록하고 (해당 컴포넌트에 가서)
<script>
export default {
name:'ModalPage',
props:{
원룸들 : Array,
}
}
</script>props : {데이터이름: 자료형이름}
해당 컴포넌트에 가서 script 내 props를 작성.
가져온 이름과 데이터 형태(Array, number 등등 )을 작성한다.
- 쓰삼
템플릿에서 등록한 props를 자유롭게 가져다 쓴다.
props는 read-only이다. 받아온 것을 수정하면 에러뜸!
(ex.모달창열렸니=true를 false로 하고 그런 것)
😊다시 한번 더 쉬운 코드로 설명!
- app.vue 에서 자식컴포넌트에 어떤 데이터를 전달할지 적기
<ListWorld :블로그글="블로그글" />
import blog from './assets/blog';
export default {
name: 'App',
data(){
return {
블로그글 : blog
}데이터가 담긴 js파일을 import 해서 data에 작명:js파일명 해서 넣는다.
그 다음, 자식컴포넌트에 어떤 데이터를 보낼 지 작성
그 다음에 <NewList :블로그글="블로그글" /> 이라고 적기
- 자식 컴포넌트로 넘어가서, Props 등록하고 template에서 쓰기
props: {
블로그글 : Array,
}🍀 Props 보낼 때 자료형 입력가능
밑에 있는 데이터가 아니라 자료를 보내려면 직접 집어넣어도 된다.
작명 = "Array, Object"
작명 = "문자자료"
:작명 = "숫자자료"
v-vind
데이터에서
return{
오브젝트 : {name " 'kim', age:20 }
}
<Discount v-bind = "오브젝트"> 라고 하면된다.
이는 <Discount :이름="오브젝트.name" :나이="오브젝트.age" 와 같다.Custom event 자식이 부모컴포넌트에 있는 데이터를 수정하고 싶을 때!
부모에게 메시지 보내는 방법
① 자식은 $emit('작명', 전달할 자료데이터)
- 데이터는 생략가능
② 부모는 메시지 받으려면 @작명한거= " "
자식)
<h4 @click="$emit('openModal', 원룸들.id)"> 집이름: {{원룸들.title}}</h4>
부모)
<RoomCard @openModal="모달창열렸니=true; 누른거 = $event" :원룸들="원룸들[i]" v-for="(작명, i) in 원룸들" :key="작명" />- 자식이 보낸 데이터는 event 변수에 담겨있음. 이렇게 하지않고, methods 함수 안에서 해도 된다.
자식컴포넌트)
<template>
<h4 @click="함수"> 집이름: {{원룸들.title}}</h4>
</template>
자식컴포넌트)
<script>
export ~~~
methods : {
함수() {
this.$emit('openModal', this.원룸들.id)
}
}
</script>props든 data든'emit()를 함수 안에서 하고 싶으면 'this.$emit()'
내가 헷갈린 Props 다시 정리!!!!
1. 먼저 data를 assets 폴더 내에 .js의 형태로 저장한다.
export default[
{name:"chae", age: 20,
~~~~~~
}
]2. App.vue에서 저 data를 가져오기
1) script 내에 data 등록
🤗 왼쪽은 작명, 오른쪽은 불러온 데이터명
2) 어느 컴포넌트에 props로 전달할 것인지 작성
3) 전달할건지 작성하면서 data와 자식컴포넌트가 import되었는지 확인
App.vue)
import NewContainer from "@/components/NewContainer.vue";
import insta from "../src/assets/insta";
export default {
name: 'App',
data(){
return {
post : insta
// post라는 이름으로 insta라는 이름으로 불러온 데이터 저장
}
},
components: {
NewContainer : NewContainer
}
}3. 자식컴포넌트로 props보내자!
App.vue)
<template>
<NewContainer :post="post" />
</template>app.vue 내 스크립트에서 올라가 template 쪽에서 자식컴포넌트를 전달하고 그 옆으로 어떤 데이터를 보내는 건지 작성한다.
post 이름으로 작명했으니 post = "post"로 작성하고, 보통 통일하는 것이 일반적이다.
4. 자식컴포넌트에서 props 받기
export default {
name: 'NewContainer',
props: {
post : Array,
},
}post라는 데이터명을 받는데, 이 데이터의 자료형을 적는 것이다.
그러면 템플릿내에서 {{post[0].name}} 처럼 쓸 수 있다.
