I’ve got a myInput.vue
component which accepts a v-model
prop and captures the value of v-model
as modelValue
, like so:
<template>
<input type="text" :value="modelValue" />
</template>
<script setup>
const props = defineProps({
modelValue: {
type: [String, null],
required: true
}
})
</script>
If I’m using v-bind
as opposed to v-model
, how would I go about capturing the value from within the component? Using bindValue
doesn’t work.
2
Answers
What about using the
defineModel
macro :As far as I understand, you need to emit an event in the child component and catch it in the parent component.
You can do it like this:
There are two ways to use this component:
or
I’m assuming that text is a ref variable.
It’s worth remembering that v-model is basically just an add-on to v-bind and v-on, here’s a more detailed description: https://vuejs.org/guide/components/v-model.html#basic-usage.