如何使用带有 v-model 的 Emit？

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>

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

Answer 1

在子组件中定义一个名为 modelValue 的道具并发出一个名为 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>

Answer 2

我想 child 组件名称是 input-form。 parent 应该使用回调函数处理 child 触发的事件。该函数将是一种将接收到的值分配给名为 valueSuperficie.

的内部值的方法

所以 parent 应该是这样的：

<template>
  <input-form @user-entry="onUserEntry" label="Surface en m²" />
</template>

<script>
   data() {
     return {
      valueSuperficie = null,
      }
   },
   methods: {
     onUserEntry(valueInput) {
       this.valueSuperficie = valueInput;
     }
   }
</script>

如何使用带有 v-model 的 Emit？

how to use an Emit with a v-model?

emit

vue.js

v-model

vuejs3