vue.js - 如何将 Emit 与 v 模型一起使用？

Question

我在 Vue3 上，我试图从 child 那里获取一个值给 parent 。 所以我的代码是:

在 parent 身上:

<template>
  <input-form v-model="valueSuperficie" label="Surface en m²" />
</template>

<script>
  data() {
    return {
      valueSuperficie = null,
    }
  }
</script>

然后我尝试在 child 身上发射。

<template>
  <input 
    v-on:change="$emit('userEntry', $event.target.valueInput)"
    v-model="userEntry"
  />
</template>
    
<script>
  data() {
    return {
      userEntry: this.valueInput,
    };
  },
  emits: ["userEntry"],
    
</script>

我知道我的代码是错误的，我想要的是成功地存储 child 的值，即 userEntry 在 parent 的数据 valueSuperficie 中。 谢谢

Answer 1

在子组件中定义一个名为 modelValue 的 prop 并发出一个名为 update:modelValue 的事件:

<template>
   <input 
      v-on:input="$emit('update:modelValue', $event.target.value)"
      :value="modelValue"
/>
</template>

<script>
export default{
  props:{
     modelValue:String
    },
  emits: ["update:modelValue"],
}
</script>