[Vue.js] 부모 컴포넌트로 데이터 보내기 (Emit)

• 코드 구현 (ver.1)
  • props로 data를 넘겨주고 값이 변하면 emit로 부모 컴포넌트에 값을 보내줌
  • 부모 컴포넌트로 보내온 값을 받아서 update 시켜줌 
• Home.vue

<template>
  <div>
    <h1>This is Home Page!</h1>
    <form action="">
      <InputField :name="name" @update-name="updateName" />
    </form>
    {{ name }}
  </div>
</template>
<script>
import InputField from '@/components/InputField.vue';
export default {
  components: {
    InputField
  },
  data(){
    return{
      name: ''
    }
  },
  methods:{
    updateName(name){
      this.name = name;
    }
  }
};
</script>
<style scoped>
h1 {
  color: royalblue;
}
</style>

 

• InputField.vue

<template>
    <div>
        <label for="">Name</label>
        <input  
            type="text"
            :value = "name"
            style="padding: 30px; border: 2px solid green;"
            @input="updateName"
        >
    </div>

</template>

<script>
export default {
    props: {
        name: {
            type: String,
            required: true
        }
    },
    methods: {
        updateName(e){
            console.log(e.target.value);
            // 부모 컴포넌트로 올림 --> $emit(원하는 이벤트 이름, 올리고 싶은 값) 
            this.$emit('update-name', e.target.value);
        }
    }
}
</script>

 

• 코드 구현 (ver.2) (대부분 이렇게 씀)
  • component에도 v-model 사용 가능
  • child component에게 value 보냄
• Home.vue

<template>
  <div>
    <h1>This is Home Page!</h1>
    <form action="">
      <!-- component에도 v-model 사용 가능 
           child component에게 value 보냄 -->
      <InputField v-model="name"/>
      <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){
  //     this.name = name;
  //   }
  // }
};
</script>
<style scoped>
h1 {
  color: royalblue;
}
</style>

 

• 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: {
            type: String,
            required: true
        }
    },
    methods: {
        // updateName(e){
        //     console.log(e.target.value);
        //     // 부모 컴포넌트로 올림 --> $emit(원하는 이벤트 이름, 올리고 싶은 값) 
        //     this.$emit('update-name', e.target.value);
        // }
    }
}
</script>

 

• 실행 화면