在Vue 3中，`@update:model-value`

最新推荐文章于 2025-03-03 11:06:10 发布

咪路咪路milu

最新推荐文章于 2025-03-03 11:06:10 发布

阅读量4k

点赞数 9

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_57537410/article/details/135849843

版权

本文介绍了Vue3中如何通过@update:model-value自定义事件修饰符简化子组件向父组件传递新值的过程，以及如何在父子组件间实现双向数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Vue 3中，`@update:model-value`是一个自定义事件修饰符，用于在子组件中更新父组件中的`v-model`绑定的值。

通常情况下，`v-model`指令用于在父子组件之间双向绑定数据。在子组件中，可以使用`$emit`方法触发一个自定义事件来更新父组件中的数据。而`@update:model-value`就是一个语法糖，用于简化这个过程。

具体用法如下：

1. 在父组件中，使用`v-model`指令绑定一个变量，例如：

```html
<template>
  <ChildComponent v-model="value" />
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>
```

2. 在子组件中，使用`$emit`方法触发`update:model-value`事件，并传递新的值，例如：

```html
<template>
  <input :value="modelValue" @input="$emit('update:model-value', $event.target.value)" />
</template>

<script>
export default {
  props: ['modelValue'],
}
</script>
```

在子组件中，我们使用`:value`绑定`modelValue`，并在`@input`事件中使用`$emit`方法触发`update:model-value`事件，并传递新的值。

这样，当子组件中的输入框的值发生变化时，父组件中的`value`变量也会相应地更新。

vue3子组件通过update事件修改父组件绑定的属性值，update:modelValue_vue3 update:属性名-CSDN博客文章浏览阅读4.9k次，点赞3次，收藏5次。vue3子组件通过update事件修改父组件绑定的属性值，update:modelValue注意事项_vue3 update:属性名https://blog.csdn.net/vcdddd/article/details/127225797