如何在 vue 3 脚本设置中的组件上使用 v-model

Posted 2023-02-16

【中文标题】如何在 vue 3 脚本设置中的组件上使用 v-model

【英文标题】：How to use v-model on component in vue 3 script setup

【发布时间】：2021-06-18 14:49:50

【问题描述】：

我想在一个组件上添加一个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>

我试图reproduce this tutorial，但我卡住了，不知道我错过了什么。

我想在 Parent.vue 组件中显示 name 。你知道如何解决这个问题吗？

【参考方案1】：

在 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, defineEmits  from 'vue'

const props = defineProps(
  modelValue: String
)

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

function updateValue(value) 
  emit('update:modelValue', value)

</script>

【讨论】：

这在与 TS 一起使用时会出现打字问题，有什么解决方法吗？

哪些打字有问题？

@input="$emit('update:modelValue', $event)" 这应该是：@input="(e)=> $emit('update:modelValue', e.target.value)"，但 TS 抱怨后者

【参考方案2】：

我也喜欢与计算一起使用

<template>
  <div>
    <input v-model="model">
  </div>
</template>

<script setup>
import  computed  from 'vue'

const props = defineProps(
  modelValue: 
    type: [String, Number],
    default: ''
  
)

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

const model = computed(
  get () 
    return props.modelValue
  ,

  set (value) 
    return emit('update:modelValue', value)
  
)
</script>