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

Posted 2023-02-23

【中文标题】如何将 Emit 与 v-model 一起使用？

【英文标题】：how to use an Emit with a 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中。 谢谢

【参考方案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>