vueJsvue js 기본 // 부모한테 가져온 데이터를 수정하고싶을때 @커스텀이벤트

먼저 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에서 쓸 수 있게된거임.

 

 

 

파일 옮겨다닐때 뇌가리 회로가 막히는듯 ㅡㅡ