如何将 Emit 与 v-model 一起使用？答案

【问题标题】：how to use an Emit with a v-model?如何将 Emit 与 v-model 一起使用？
【发布时间】：2021-12-30 22:37:58
【问题描述】：

我在 Vue3 上，我尝试从子级到父级捕获一个值。所以我的代码是：

在父级上：

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

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

我试着在孩子身上发出一个声音。

<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中。谢谢

【问题讨论】：

标签： vue.js emit v-model

【解决方案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>

【讨论】：

【解决方案2】：

我想子组件名称是input-form。父级应使用回调函数处理子级触发的事件。该函数将是一个将接收到的值分配给名为valueSuperficie的内部值的方法。

所以父母应该是这样的：

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

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

【讨论】：