[vue] 부모component <=> 자식 component 데이터전달

부모=>자식 데이터 전달

부모 component에서 자식 component로 데이터를 전달하려면 html에서 데이터를 전달하고

자식 component에서 script에서 props로 데이터를 정의해 줘야 한다.

 

[ 부모component.vue]

<template>
  <Component1 :childData="parentData" />


</template>

 

[자식component.vue]

<template>
    <div class="자식componentClass">
      <p>{{ text }}</p>
    </div>
</template>
  
<script>
    export default {
      name: "자식component",
      props: {
        //{변수} : {데이터 타입},
        childData: String,
      }
    }
  </script>

 

자식=>부모 데이터 전달

[자식component.vue]

<template>
    <div class="modal" v-if="isModal">
        <button @click="$emit('closeModal')">닫기</button>
    </div>
</template>

 

[부모component.vue]

<template>
  <자식cmponent
    @closeModal="isModal=false"
  />

</template>

 

자식 component에서 버튼클릭시 부모component에서 closeModel 이벤트가 활성화 되면서 isModle=false가 수행된다.