Vue.py

外观

本页目录

组件 v-model ​

基本用法 ​

v-model 可以在组件上使用以实现双向绑定。

推荐的实现方式是使用 defineModel() ：

vue
<!-- Child.vue -->
<template>
  <div>parent bound v-model is: {{ model.value }}</div>
</template>

<script lang='py'>
model = defineModel()

def update():
    model.value += 1
    
</script>

父组件可以用 v-model 绑定一个值：

template
<!-- Parent.vue -->
<Child v-model="count"></Child>

defineModel() 返回的值是一个 ref。它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用：

  • 它的 .value 和父组件的 v-model 的值同步；
  • 当它被子组件变更了，会触发父组件绑定的值一起更新。

底层机制 ​

编译器将 defineModel 展开为以下内容：

  • 一个名为 value 的 prop，本地 ref 的值与其同步；
  • 一个名为 update:value 的事件，当本地 ref 的值发生变更时触发。

v-model 的参数 ​

组件上的 v-model 也可以接受一个参数：

template
<MyComponent v-model:title="bookTitle.value"></MyComponent>

在子组件中，我们可以通过将字符串作为第一个参数传递给 defineModel() 来支持相应的参数：

vue
<!-- MyComponent.vue -->
<template>
  <Input type="text" v-model="title.value"></Input>
</template>

<script lang='py'>
title = defineModel('title')
</script>

多个 v-model 绑定 ​

利用刚才在 v-model 参数小节中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个 v-model 双向绑定。

组件上的每一个 v-model 都会同步不同的 prop，而无需额外的选项：

template
<UserName
  v-model:first_name="first.value"
  v-model:last_name="last.value"
></UserName>
vue
<template>
  <Input type="text" v-model="firstName.value"></Input>
  <Input type="text" v-model="lastName.value"></Input>
</template>

<script lang='py'>
firstName = defineModel('first_name')
lastName = defineModel('last_name')
</script>

处理 v-model 修饰符 ​

WARNING

请注意，这是一个预留的语法，当前版本未实现。

在学习输入绑定时，我们知道了 v-model 有一些内置的修饰符，例如 .trim，.number 和 .lazy。在某些场景下，你可能想要一个自定义组件的 v-model 支持自定义的修饰符。

我们来创建一个自定义的修饰符 capitalize，它会自动将 v-model 绑定输入的字符串值第一个字母转为大写：

template
<MyComponent v-model.capitalize="myText" />

通过像这样解构 defineModel() 的返回值，可以在子组件中访问添加到组件 v-model 的修饰符：

vue
<script setup>
const [model, modifiers] = defineModel()

console.log(modifiers) // { capitalize: true }
</script>

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

为了能够基于修饰符选择性地调节值的读取和写入方式，我们可以给 defineModel() 传入 get 和 set 这两个选项。这两个选项在从模型引用中读取或设置值时会接收到当前的值，并且它们都应该返回一个经过处理的新值。下面是一个例子，展示了如何利用 set 选项来应用 capitalize (首字母大写) 修饰符：

vue
<script setup>
const [model, modifiers] = defineModel({
  set(value) {
    if (modifiers.capitalize) {
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
    return value
  }
})
</script>

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

在演练场中尝试一下

带参数的 v-model 修饰符 ​

这里是另一个例子，展示了如何在使用多个不同参数的 v-model 时使用修饰符：

template
<UserName
  v-model:first-name.capitalize="first"
  v-model:last-name.uppercase="last"
/>
vue
<script setup>
const [firstName, firstNameModifiers] = defineModel('firstName')
const [lastName, lastNameModifiers] = defineModel('lastName')

console.log(firstNameModifiers) // { capitalize: true }
console.log(lastNameModifiers) // { uppercase: true}
</script>

在 GitHub 上编辑此页