Как использовать v-модель в компоненте в настройке скрипта vue 3

Я хочу добавить v-model в компонент, но получил следующее предупреждение:

[Vue warn]: Component emitted event "input" but it is neither declared in the emits option nor as an "onInput" prop.

Вот мой код:

// Parent.vue
<template>
  <h2>V-Model Parent</h2>
  <Child v-model="name" label="Name" />
  <p>{{ name }}</p>
</template>

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

const name = ref('')
</script>

// Child.vue
<template>
  <input
    class="input"
    type="text"
    :placeholder="props.label"
    :value="props.value"
    v-on:input="updateValue($event.target.value)"
  />
</template>

<script setup>
import { defineProps, defineEmit } from 'vue'
const props = defineProps({
  label: String,
  value: String
})
const emit = defineEmit('input')

function updateValue(value) {
  emit('input', value)
}
</script>

Я пытался воспроизвести это руководство, но я застрял и понятия не имею, что мне не хватает.

Я хочу отображать {{ name }} в компоненте Parent.vue. У тебя есть идеи, как это решить?


javascript vue.js vuejs3 vue-composition-api v-model
person wittgenstein    schedule 21.03.2021    source источник

Ответы (1)


arrow_upward
4
arrow_downward

В vue 3 свойство value было изменено на modelValue, а генерируемое событие input на update:modelValue:

// Child.vue
<template>
  <input
    class="input"
    type="text"
    :placeholder="props.label"
    :value="props.modelValue"
    v-on:input="updateValue($event.target.value)"
  />
</template>

<script setup>
import { defineProps, defineEmit } from 'vue'
const props = defineProps({
  label: String,
  modelValue: String
})
const emit = defineEmit(['update:modelValue'])

function updateValue(value) {
  emit('update:modelValue',value)
}
</script>
person Boussadjra Brahim    schedule 21.03.2021
comment
Это вызывает проблемы с набором текста при использовании с TS. Какое решение? - person Charles Okwuagwu; 07.07.2021
comment
какие проблемы с набором текста? - person Boussadjra Brahim; 07.07.2021
comment
@input="$emit('update:modelValue', $event)" Это должно быть: @input="(e)=> $emit('update:modelValue', e.target.value)", но TS жалуется на последнее - person Charles Okwuagwu; 07.07.2021