javascript - How to pass a ref to a child input component with Vue? - Stack Overflow

admin管理员组

文章数量:1310385

I'm currently trying to pass a ref to get the value of the input (base-input ponent) on submit. You will find below the two ponents. With the console.log in handleSubmit, email is always undefined.

Thanks in advance for your help.

Parent ponent

<template>
  <form @submit.prevent="handleSubmit">
    <div class="flex flex-col mt-10">
      <form-label forInput="email" label="Email Address" />
      <base-input type="email" name="email" ref="email" />
    </div>
  </form>
</template>

<script>

import BaseInput from "../UI/BaseInput.vue";
export default {
  ponents: {
    BaseInput,
  },
  methods: {
    handleSubmit() {
      const email = this.$refs.email.value;
      console.log(email);
    },
  },
};
</script>

Child Input ponent

<template>
  <input
    :type="type"
    :name="name"
    :ref="name"
  />
</template>

<script>
export default {
  props: ["type", "name"],
};
</script>

I'm currently trying to pass a ref to get the value of the input (base-input ponent) on submit. You will find below the two ponents. With the console.log in handleSubmit, email is always undefined.

Thanks in advance for your help.

Parent ponent

<template>
  <form @submit.prevent="handleSubmit">
    <div class="flex flex-col mt-10">
      <form-label forInput="email" label="Email Address" />
      <base-input type="email" name="email" ref="email" />
    </div>
  </form>
</template>

<script>

import BaseInput from "../UI/BaseInput.vue";
export default {
  ponents: {
    BaseInput,
  },
  methods: {
    handleSubmit() {
      const email = this.$refs.email.value;
      console.log(email);
    },
  },
};
</script>

Child Input ponent

<template>
  <input
    :type="type"
    :name="name"
    :ref="name"
  />
</template>

<script>
export default {
  props: ["type", "name"],
};
</script>

• javascript
• vue.js
• ref

Share Improve this question Follow edited Oct 27, 2022 at 12:33 Sebastien Stordeur asked Oct 27, 2022 at 12:32 Sebastien StordeurSebastien Stordeur 7311 silver badge55 bronze badges 3

• It looks like you are trying to ref the ponent itself which doesn't really make any sense. What are you trying to acplish with the ref? – pzutils Commented Oct 27, 2022 at 12:37
• Trying to get the value of the input once we submit the form, but i agree it,s not a ref on the ponent itself, but a ref on the input inside the ponent – Sebastien Stordeur Commented Oct 27, 2022 at 12:43
• What about using emit to emit the value from the child to the parent instead? vuejs/guide/ponents/events.html#event-arguments – user115014 Commented Oct 27, 2022 at 13:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

If you want to access the value from the child's input field in the parent ponent, you need a way for data to flow from child to parent ponent, and that is done through emits.

But wouldn't it be nice to be able to use v-model with your custom BaseInput ponent? The same way one would use form input binding?

<input
  :value="text"
  @input="event => text = event.target.value">

or v-model to simplify

<input v-model="text">

Something like this

<BaseInput v-model="email" />

Well, we can do just that. What you need is a modelValue prop and update:modelValue emit event.

You can wrap both inside a writeable puted property for a cleaner and clearer syntax.

const props = defineProps({
    modelValue: {
        type: String,
    },
});

const emit = defineEmits(['update:modelValue']);

const internalValue = puted({
    get() {
        return props.modelValue;
    },
    set(value: string) {
        return emit('update:modelValue', value);
    },
});

When internalValue is set to a new value, it emits that event to the parent ponent and it syncs it through props.modelValue. Meaning, you can change props.modelValue in the parent ponent and the change would be reflected inside your custom ponent. And vice versa.

I like this approach since it gives you a very natural way of reasoning about your ponent. Now, this concept isn't restricted to v-model per se, you can use it with any prop you want to synchronize to the parent ponent. Just use name prop, update:name emit in child ponent and use v-model:name in parent ponent.

---

Resources:

• https://vuejs/guide/ponents/events.html#usage-with-v-model

first the BaseInput is spelt wrong in the template.

Instead of

<base-input type="email" name="email" ref="email" />

you need to change it to

<BaseInput :type="'email'" :name="'email'" ref="email" />

A way better approach will be to use @emit()

Child.vue

<template>
  <input
    :type="type"
    :name="name"
    @change="$emit('inputContent', Content)"
    v-model="Content"
  />
</template>

<script>
export default {
  emits: ['inputContent'],
   data() {
        return {
            Content: '',
        }
    },
  props: ["type", "name"],
};
</script>

Don't forget to declare your props as strings.

本文标签： javascriptHow to pass a ref to a child input component with VueStack Overflow