[Vue] Props & Emit Event 정리

Pass Props

- 요소의 속성을 사용하여 데이터를 전달함
- props는 상위 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성
- 하위 컴포넌트는 props 옵션을 사용하여 수신하는 props를 명시적으로 선언
- 부모에서 넘겨주는 props는 kebab-case로 작성
- 자식에서 받는 props는 camelCase로 작성
- 단방향 바인딩을 형성하므로 하위 컴포넌트에서 props를 변경 불가

// Parent.vue
<template>
  <div>
    <h2> Partent </h2>
    <Child static-props = "Parent to child"/>
  </div>
</template>

// child.vue
<template>
  <div>
    <h2> Child </h2>
    <p> {{ staticProps }} </p>
  </div>
</template>

<script>
export default {
  name : 'Child',
  props : {
    staticProps : String,
  }
}
</script>​

// ----------------------------------------------
// Dynamice Props

// Parent.vue
<template>
  <div>
    <h2> Partent </h2>
    :dynamic-props="dynamicProps}}
  </div>
</template>

<script>
export default {
  name : 'Parent',
  data : function(){
    return {
      dynamicProps : "Parent to child",
    }
  }
}
</script>​

// child.vue
<template>
  <div>
    <h2> Child </h2>
    <p> {{ dynamicProps }} </p>
  </div>
</template>

<script>
export default {
  name : 'Child',
  props : {
    dynamicProps : String,
  }
}
</script>​

Emit Event

- $emit 메서드를 통해 상위 컴포넌트에 이벤트를 발생해서 전달
- HTML 요소에서 사용할 때는 kebab-case
- JavaScript에서 사용할 때는 camelCase

//Child.vue

<template>
  <div>
    <button @click = "ChildToParent"> 전송 </button>
  <div>
</template>

<script>
export default{
  methods:{
    ChildToParent : function(){
      this.$emit('child-to-parent')
    }
  }
}
</script>

//Parent.vue
<template>
  <div>
    <MyChild @child-to-parent="event"/>
  </div>
</template>

<script>
export default{
  methods{
    event: function(){
      console.log("event")
    }
  }
}
</script>​

// ----------------------------------------------
// Dynamice emit

//Child.vue

<template>
  <div>
    <input type = "text" v-model="childData" @keyup.enter="childinput">
  <div>
</template>

<script>
export default{
  data: function(){
    return {
      childData: null,
    }
  },
  methods: function(){
    ChildToParent : function(){
      this.$emit('child-input', this.childData)
      this.childInputData = ""
    }
  }
}
</script>

//Parent.vue
<template>
  <div>
    <MyChild @child-input="parentData"/>
  </div>
</template>

<script>
export default{
  methods{
    parentData : function(inputData){
      console.log(inputData)
    }
  }
}
</script>​