vue3 v-model

// 부모 컴포넌트
<!-- 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>