v-model参数的用法

在 Vue.js 中，v-model 指令用于在表单元素和组件中创建双向数据绑定。当使用 v-model 时，它会根据元素的类型自动选择正确的属性并监听输入事件。你可以为 v-model 指令传递一个参数，以改变绑定的属性或传递其他参数。

下面是一些 v-model 参数的用法：

1. 基本用法：

   <input v-model="message">
   

   这里 v-model 的参数是 message，它表示将输入框的值双向绑定到 message 这个数据属性上。当输入框的值发生变化时，message 的值也会跟着变化。

2. 自定义属性：
   有时候我们想将 v-model 绑定到某个 input 的特定属性上，可以使用参数来指定属性名：

   <input v-model:value="message">
   

   这里的参数是 value，它告诉 v-model 把输入框的值绑定到 value 属性上，而不是默认的 input 事件。

3. 传递其他参数：
   在自定义组件中，我们可以传递额外的参数给 v-model 绑定的组件：

   <my-component v-model:foo="bar"></my-component>
   

   这里的参数是 foo，它告诉 v-model 传递 bar 给组件的 foo 属性，实现了自定义组件的双向绑定。

4. 修饰符：
   你还可以使用修饰符来改变 v-model 行为，例如 .lazy 修饰符会将输入事件改为 change 事件：

   <input v-model.lazy="message">
   

   这里的 .lazy 是一个修饰符，它告诉 v-model 在 change 事件中更新数据，而非默认的 input 事件。

综上所述，v-model 的参数可以用于指定绑定的属性、传递给组件的属性，以及改变 v-model 的行为。这些灵活的用法使得 v-model 在处理表单元素和自定义组件时更加方便和强大。

vue2自定义组件model

<!-- 自定义 v-model -->
<CustomVModel v-model="name"/> 

<!-- CustomVModel -->
<template>
  <!-- 例如：vue 颜色选择 -->
  <input type="text"
    :value="text"
    @input="$emit('change', $event.target.value)"
  >
  <!--
    1. 上面的 input 使用了 :value 而不是 v-model
    2. 上面的 change 和 model.event 要对应起来
    3. text 属性对应起来
  -->
</template>

<script>
export default {
    model: {
        prop: 'text', // 对应 props text
        event: 'change'
    },
    props: {
        text1: String,
        default() {
            return ''
        }
    }
}
</script>

vue3自定义组件model

<!-- index.vue 绑定一个值 -->
<CustomVModel v-model="name"/> 

<!-- CustomVModel.vue -->
<template>
    <input type="text"
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
    >
</template>

<script>
export default {
    props: {
        modelValue: String,
    }
}
</script>

<!-- UserInfo组件 -->
<template>
  <input :value="name" @input="$emit('update:name', $event.target.value)"/>
  <input :value="age" @input="$emit('update:age', $event.target.value)"/>
</template>

<script>
export default {
  name: 'UserInfo',
  props: {
    name: String,
    age: String
  }
}
</script>

<!-- 绑定多个值
使用 vue3中v-model可绑定多个属性 -->
<user-info
    v-model:name="name"
    v-model:age="age"
></user-info>