먼저 Modal.vue에서 props로 App.vue의 데이터를 가져왔다.
근데 props로 가져온 데이터는 수정을 할 수가 없음.
그럼 Modal.vue에서 App.vue의 데이터를 수정하고 싶을때는?
custom event를 사용하자. Modal.vue 에서 App.vue에 메세지를 보내는것임.
Lists.vue에서
<h4 v-on:click="$emit('openModal')">{{ products.title }}</h4>
이건 제목으로 한거고..
App.vue에서
<List v-on:openModal="modalStatus = 1; now = i" :products="products[i]" v-for="(a,i) in products" :key="a" />
lists.vue에서 opanModal이라는 이벤트가 오면 modalStatus를
여기서 데이터도 전해질수 있는데
<h4 v-on:click="$emit('openModal', 데이터)">{{ products.title }}</h4>
이런식으로 원하는 데이터를 옆에 적고 보내면
<List v-on:openModal="modalStatus = 1; now = i; 전해진데이터 = $event" :products="products[i]" v-for="(a,i) in products" :key="a" />
$event로 데이터를 가져올수있음.
모달창 닫기버튼
Modal.vue
<button v-on:click="$emit('closeModal', 0)">close</button>
App,vue
<Modal v-on:closeModal="modalStatus=$event" :products="products" :modalStatus="modalStatus" :now="now"/>
# 이미지 클릭으로 바꿨음
lists.vue에서
<img v-on:click="$emit('openModal', products.id)" :src="products.image">
해석 : 태그를 클릭하면 openModal이란 이벤트와 app.vue에 product.id라는 데이터를 보낼거임.
app.vue에서
<List v-on:openModal="modalStatus = 1; now = $event" :products="products[i]" v-for="(a,i) in products" :key="a"/>
해석 : openModal이벤트가 작동하면 modalStatus는 1로 변하고 now는 $event로 바뀔거임.
$event는 아까 lists.vue에서 보낸 product.id라는 데이터임.
여기서 닫기버튼은 모달에서 만져줘야함.
modal.vue에서
<button v-on:click="$emit('closeModal', 0)">close</button>
해석 : 버튼이 클릭되면 closeModal이라는 이벤트로 0값을 보낼거임.
app.vue에서
<Modal v-on:closeModal="modalStatus=$event" :products="products" :modalStatus="modalStatus" :now="now"/>
closeModal이라는 이벤트가 작동하면 modalStatus는 $event로 변할거임
$event는 아까 modal.vue에서 보낸 0이라는 데이터임.
++추가해서
app.vue에서
<List v-on:openModal="modalStatus = 1; now = $event" :products="products[i]" v-for="(a,i) in products" :key="a"/>
v-for으로 반복문을 돌렸는데 props로 데이터를 보내준건
:products[i]의 객체값을 products라는 이름으로 보내줌.
list.vue에서
export default {
name : 'List',
props : {
products : Object,
}
}
products라는 데이터이름으로 받아온 객체가 들어가고
template에서 쓸 수 있게된거임.
파일 옮겨다닐때 뇌가리 회로가 막히는듯 ㅡㅡ