Kossie Coder 17. 부모 컴포넌트로 데이터 보내기 (Emit)

자식 컴포넌트에서 부모 컴포넌트로 어떻게 데이터를 보낼 수 있는지.

 

 

HomeView.vue

<template>
 <div>
  <h1>This is Home page</h1>
  <form action="">
   <InputField :name="name" @update-name="updateName" /> <!--props로 name을 전달해준다.-->
   <!--5.변경된 name을 props로 전달.-->
   <!--3.'update-name'이벤트가 발생하면 updateName함수 실행.-->
  <br />
  <button>Submit</button>
  </form>
  {{ name }} //5.name 변경됨
 </div>
</template>

<script>
import InputField from "@/components/inputField.vue"
export default {
 components: {
  InputField,
 },
 data(){
  return {
   name: "",
  }
 },
 methods: {
  updateName(name){ //4.updateName함수 실행되면서 data의 name 변경됨.
   this.name = name;
  }
 }
}
</script>

 

 

inputField.vue

<template>
 <div>
  <label for="">Name</label>
  <input 
   type="text"
   :value="name"
   //v-model="name"<- v-model을 쓰면 양방향 binding. props로 받은걸 변경하면 안되기때문에 v-model대신 :value사용
   style="padding:30px; border:2px solid green"
   @input="updateName" //1.value가 바뀌면 input이벤트가 발생되면서 updateName함수 실행.
  />
 </div>
</template>
<script>
export default {
 props: {
  name: {
   type: String,
   required: true,
  }
 },
 methods: {
  updateName(e){
   console.log(e.target.value);//input에 입력된 값이 콘솔로그에 찍힌다.
   this.$emit("update-name", e.target.value) //2.이 value를 부모 컴포넌트로 올리는 방법:(원하는event이름, 올리고싶은 값)
  }
 }
}
</script>

 

 

이런 방법도 있다. 

<template>
 <div>
  <h1></h1>
  <form action="">
   <InputField v-model="name"/>
   <!--components에도 v-model 사용가능. 자식컴포넌트에는 props가 value로 받아진다.-->
   <br />
   <button>Submit</button>
  </form>
  {{ name }}
 </div>
</template>

<script>
import InputField from "@/components/inputField.vue";
export default {
 components: {
  InputField
 },
 data() {
  return {
   name = "",
  }
 },
 methods: {
  //updateName(name){ 이제 이 method는 필요없다.
  // this.name = 'name'
  //} 
 }
}

</script>

 

 

inputField.vue

<template>
 <div>
  <label for="">Name</label>
  <input
   type="text"
   :value="value"
   style="padding:30px; border:2px solid green"
   @input="$emit('input', $event.target.value)"
  />
 </div>

</template>
<script>
 export default {
  props: {
   value: { // v-model로 넘어오면 value로 오게된다.
    type: String,
    required: true,
   }
  },
  methods: {
  // updateName(e){ 이제 이 함수가 필요없다.
  //  this.$emit('update-name', e.target.value)
  // }
  }
 
 }

</script>

 

 

**모든 내용의 출처는 Kossie Coder입니다.