Vue3 - Ref in component?-CodePudding

I'm making input component for my login form instead of creating input tag every time that I need it. However, I want to save the input value at @input event, thing that's I've made before (when I didn't have component) thanks to refs (by writing ref.value.value)

But now, I can't just add ref on my input because they'are component and not an html tag. How can I fix it ? :( I need their value for regExp test

there's before / after of my input

before after

Thanks for your help

CodePudding user response：

You can try this way (I used Vue3 Composition API script setup):

Check out the playground I have set up here!

Parent component:

<template>
<Comp v-model="myData.field" />

<br />
  
{{ myData.field }}
</template>

<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue'

const myData = ref({
  field: 'something',
})
</script>

Custom input child component:

<template>
<input
  type="text"
  @input="$emit('update:modelValue', $event.target.value)"
  :value="modelValue"
/>
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

Related docs:

CodePudding user response：

Pass the ref as a prop and in the input tag put ref.

<InputComponent refProp="email" />



<input :ref="refProp" >