在vue3中，组件的script setup 里如何理解 v-model 参数

最新推荐文章于 2025-04-23 11:38:43 发布

_沐晨

最新推荐文章于 2025-04-23 11:38:43 发布

阅读量758

点赞数 8

分类专栏： vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_41442779/article/details/135983810

版权

文章介绍了如何在Vue3中使用defineEmits和defineProps函数来定义组件的事件和属性，展示了如何通过v-model实现组件间的双向数据绑定，以及如何在模板和父组件中使用这些功能。

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

在Vue 3中，可以使用`defineEmits`和`defineProps`函数来定义组件的`v-model`。`defineEmits`函数用于定义组件的事件，而`defineProps`函数用于定义组件的属性。

以下是一个示例：

import { defineComponent, defineEmits, defineProps } from 'vue';

const MyComponent = defineComponent({
  emits: defineEmits(['update:modelValue']),
  props: defineProps(['modelValue']),
  methods: {
    handleChange(event) {
      this.$emit('update:modelValue', event.target.value);
    }
  },
  template: `
    <input :value="modelValue" @input="handleChange">
  `
});

export default MyComponent;

在上面的示例中，我们使用`defineEmits`函数定义了一个名为`update:modelValue`的事件。然后，使用`defineProps`函数定义了一个名为`modelValue`的属性。

在组件的模板中，我们通过绑定`:value="modelValue"`将`modelValue`属性绑定到`input`元素的`valu