// 부모 컴포넌트
<!-- emit, props -->
<!-- <template>
<Input
:value="inputText"
@handlerInput="onInput"
/>
{{ inputText }}
</template>
<script setup>
import { ref } from 'vue';
const inputText = ref('');
const onInput = (e) => {
console.log(e, '인풋 동작');
inputText.value = e
}
</script> -->
<!-- v-model -->
<!-- <template>
<Input
v-model="inputText"
/>
{{ inputText }}
</template>
<script setup>
import { ref } from 'vue';
const inputText = ref('');
</script> -->
<!-- 이름이 존재하는 emit -->
<!-- <template>
<Input
v-model:handlerInput="inputText"
/>
{{ inputText }}
</template>
<script setup>
import { ref } from 'vue';
const inputText = ref('');
</script> -->
<!-- defineModel -->
<template>
<Input
v-model:handlerInput="inputText"
/>
{{ inputText }}
</template>
<script setup>
import { ref } from 'vue';
const inputText = ref('');
</script>
// 자식 컴포넌트
<!-- emit, props -->
<!-- <template>
<input
class="inputStyle"
type="text"
placeholder="입력해주세요"
:value="props.value"
@input="emit('handlerInput', $event.target.value)"
/>
</template>
<script setup>
const emit = defineEmits([
'handlerInput'
]);
const props = defineProps([
'value'
]);
</script>
<style>
.inputStyle {
border: 1px solid #000000;
}
</style> -->
<!-- v-model -->
<!-- <template>
<input
class="inputStyle"
type="text"
:value="modelValue"
@input="emit('update:modelValue', $event.target.value)"
>
</template>
<script setup>
const emit = defineEmits(['update:modelValue']);
const props = defineProps([
'modelValue'
]);
</script>
<style>
.inputStyle {
border: 1px solid #000000;
}
</style> -->
<!-- 이름이 있는 emit -->
<!-- <template>
<input
class="inputStyle"
type="text"
:value="handlerInput"
@input="emit('update:handlerInput', $event.target.value)"
>
</template>
<script setup>
const emit = defineEmits(['update:handlerInput']);
const props = defineProps([
'handlerInput'
]);
</script>
<style>
.inputStyle {
border: 1px solid #000000;
}
</style> -->
<!-- defineModel -->
<template>
<input
class="inputStyle"
type="text"
v-model="handlerInput"
>
</template>
<script setup>
const handlerInput = defineModel('handlerInput');
</script>
<style>
.inputStyle {
border: 1px solid #000000;
}
</style>