基本用法

  1. https://cn.vuejs.org/guide/components/v-model.html#basic-usage
  2. 子组件 Child.vue。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<template>
    <div>Parent bound v-model is: {{ model }}</div>
    <button @click="update">Increment</button>
</template>

<script setup>
const model = defineModel()

function update() {
    model.value++
}
</script>
  1. 父组件 App.vue。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<template>
  <div>
    <h1>{{ cc }}</h1>
    <Child v-model="cc" />
  </div>
</template>

<script setup>
import Child from './components/Child.vue';
import { ref } from 'vue'

const cc = ref(0)

</script>
  1. input 双向绑定。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!-- 父组件 App.vue -->
<template>
  <div>
    <h1>{{ msg }}</h1>
    <Child v-model="msg" />
  </div>
</template>

<script setup>
import Child from './components/Child.vue';
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

1
2
3
4
5
6
7
8

<!-- 子组件 Child.vue -->
<template>
    <span>My input</span> <input v-model="model">
</template>

<script setup>
const model = defineModel()
</script>

底层机制

  1. https://cn.vuejs.org/guide/components/v-model.html#under-the-hood

v-model 的参数

  1. https://cn.vuejs.org/guide/components/v-model.html#v-model-arguments
  2. 父组件 App.vue。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<template>
  <div>
    <h1>{{ msg }}</h1>
    <Child v-model:title="msg" />
  </div>
</template>

<script setup>
import Child from './components/Child.vue';
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>
  1. 子组件 Child.vue。
1
2
3
4
5
6
7

<template>
    <span>My input</span> <input type="text" v-model="title">
</template>

<script setup>
const title = defineModel('title')
</script>

多个 v-model 绑定

  1. https://cn.vuejs.org/guide/components/v-model.html#multiple-v-model-bindings
  2. 父组件 App.vue。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<template>
  <div>
    <h1>first: {{ first }}</h1>
    <h1>last: {{ last }}</h1>
   <UserName
     v-model:first-name="first"
     v-model:last-name="last"
   />
  </div>
</template>

<script setup>
import UserName from './components/UserName.vue';
import { ref } from 'vue'

const first = ref('')
const last = ref('')
</script>
  1. 子组件 UserName.vue。
1
2
3
4
5
6
7
8
9

<template>
    <input type="text" v-model="firstName" />
    <input type="text" v-model="lastName" />
</template>

<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>

处理 v-model 修饰符

  1. https://cn.vuejs.org/guide/components/v-model.html#handling-v-model-modifiers
  2. v-model除了支持内置修饰符.trim、.number、.lazy，外还支持自定义修饰符。
  3. 子组件 MyComponent.vue。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<!-- 子组件 MyComponent.vue -->
<template>
    <input type="text" v-model="model" />
</template>


<script setup>
const [model, modifiers] = defineModel({
  set(value) {
    if (modifiers.capitalize) {
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
    return value
  }
})
</script>
  1. 父组件 App.vue。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<template>
  <div>
    <h1>first: {{ first }}</h1>
   <MyComponent
     v-model.capitalize="first"
   />
  </div>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue';
import { ref } from 'vue'

const first = ref('')

</script>

带参数的 v-model 修饰符

  1. https://cn.vuejs.org/guide/components/v-model.html#modifiers-for-v-model-with-arguments
  2. 子组件 MyComponent.vue。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<!-- 子组件 MyComponent.vue -->
<template>
    <input type="text" v-model="model" />
</template>


<script setup>
const [model, modifiers] = defineModel('first-name', {
  set(value) {
    if (modifiers.capitalize) {
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
    return value
  }
})
</script>
  1. 父组件 App.vue。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<template>
  <div>
    <h1>first: {{ first }}</h1>
   <MyComponent
     v-model:first-name.capitalize="first"
   />
  </div>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue';
import { ref } from 'vue'

const first = ref('')

</script>