부모 : Home.vue
자식 : inputField.vue
[ Home.vue ]
<template>
<div>
<h1>This is Home page</h1>
<form action="">
<InputField v-model="name" />
<br /><button>Submit</button>
</form>
{{ name }}
</div>
</template>
<script>
import InputField from "@/components/InputField";
export default {
components: {
InputField
},
data() {
return {
name: ''
}
}
}
</script>
<style scoped>
h1 {
color: red;
}
</style>
[inputFileld.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
}
}
</script>
<style scoped>
</style>