vue对v-model的理解

最新推荐文章于 2024-08-16 15:49:18 发布

井底的蜗牛

最新推荐文章于 2024-08-16 15:49:18 发布

阅读量653

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_41277748/article/details/115680507

版权

vue 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

本文详细解析了Vue中v-model的用法，它既适用于表单元素，也适用于自定义组件。对于表单元素，v-model会根据元素类型生成对应的属性和事件。在自定义组件中，v-model默认绑定value属性和input事件，但可通过model选项自定义这些行为，以改变绑定的属性和事件，如设置prop为'number'和event为'change'。

摘要由CSDN通过智能技术生成

对v-model的理解’

v-model即可以作用于表单元素，又可作用于自定义组件，无论是哪一种情况，它都是一个语法糖，最终会生成一个属性和一个事件

当其作用于表单元素时
- vue会根据作用的表单元素类型而生成合适的属性和事件。例如，作用于普通文本框的时候，它会生成value属性和input事件，而当其作用于单选框或多选框时，它会生成checked属性和change事件。

v-model也可作用于自定义组件，当其作用于自定义组件时;

默认情况下，它会生成一个value属性和input事件。

     <Comp v-model="data" />
     <!-- 等效于 -->
     <Comp :value="data" @input="data=$event" />

开发者可以通过组件的model配置来改变生成的属性和事件

// Comp
const Comp = {
    model: {
    prop: "number", // 默认为 value
    event: "change" // 默认为 input
    }
// ...
}

<Comp v-model="data" />
<!-- 等效于 -->
<Comp :number="data" @change="data=$event" />