[Vue]Props & $emit()

Props란?

부모 컴포넌트에서 자식 컴포넌트로

데이터를 전달할때 사용되어지는

단방향 데이터 전달 방식이다(자식 컴포넌트에서는 Props값의 수정이 불가능하다.)

 

부모 컴포넌트

<!--부모 컴포넌트-->
<template>
    <!--첫번째, 두번째 모두 같은 결과-->
    <!--첫번째 방법-->
    <자식컴포넌트이름 :props이름="전달데이터"/>
    <!--두번째 방법-->
    <자식컴포넌트이름 v-bind:props이름="전달데이터"/>
</template>

자식 컴포넌트 

export default {
  props: {
    title: {type : [String,Number], default : 100}, //여러가지 타입 허용
    title2: {
    type: [String,Number],  //여러가지 타입 허용
    required: true          //필수로 전달 받아야함
  	},
    title3: {
    type: Object,
    default: () => {}      //배열이나 함수의 기본 값은 항상 함수로부터 반환되어야 함
  	}
  },
  title4: {
    type: Array,
    required: true,
    default: () => { return [1, 2, 3, 4] },
    validator: (val) => {
      return val.length > 5
    }
  }
}

//default: () => { return [1, 2, 3, 4] }
//default: () => { return { abc: 'vasfd' } }

$emit

자식 컴포넌트에서는 props의 값은 변경이 불가하다.

그렇다면 $emit문법을 통해 부모 컴포넌트로 변경값을 보내어 부모의 data변경이 가능하다.

 

부모 컴포넌트

<template>
  <div>
    <h1>Welcome to Home</h1>
    <inputField :title = "title" @titleFromChild="titleChange"/>    
    {{ title }}
  </div>  
</template>
 
...
 
<script>
  date() {
    return {
      title : ""
    }
  },
 
...,
 
  methods: {
    titleChange(title) {
      this.title = title
    }
  }
</script>

부모 컴포넌트에서 새로 생성한 titleChange 메서드는 부모의 this.title 값을 titleChange 메서드가 titleFromChild 메서드로부터 받아오는 인자값 title로 지정해주게 된다.

 

자식 컴포넌트

<input type="text" :value = "title" @input = "titleUpdate" style = "padding: 20px; border: 1px pink solid">
 
...
 
<script>
  methods : {
    titleUpdate(e) {
      this.$emit('titleFromChild', e.target.value)
    }
  }
</script>

부모에서 바인딩 해준 titleFromChild 을 $emit("titleFromChild ",e.target.value )를 실행시켜 props값을 변경시킨다.

 

https://whitepro.tistory.com/255

https://goodmemory.tistory.com/145