组件 v-
model
观看 Scrimba 的互动视频课程
基本用法
v-
model 可以在组件上使用以实现双向绑定。
从 Vue 3.4 开始，推荐的实现方式是使用 define
Model() 宏：
Child.vue
vue
<script
setup>
const
model = define
Model()
function update() {
model.value++
}
</script>
<template>
<div>Parent bound v-
model is: {{
model }}</div>
<button @click="update">Increment</button>
</template>
父组件可以用 v-
model 绑定一个值：
Parent.vue
template
<Child v-
model="count
Model" />
define
Model() 返回的值是一个 ref。它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用：
它的 .value 和父组件的 v-
model 的值同步；
当它被子组件变更了，会触发父组件绑定的值一起更新。
这意味着你也可以用 v-
model 把这个 ref 绑定到一个原生 input 元素上，在提供相同的 v-
model 用法的同
时轻松包装原生 input 元素：
vue
<script
setup>
const
model = define
Model()
</script>
<template>
<input v-
model="
model" />
</template>
演练场示例
底层机制
define
Model 是一个便利宏。编译器将其展开为以下内容：
一个名为
modelValue 的 prop，本地 ref 的值与其同步；
一个名为 update:
modelValue 的事件，当本地 ref 的值发生变更
时触发。
在 3.4 版本之前，你一般会按照如下的方式来实现上述相同的子组件：
Child.vue
vue
<script
setup>
const props = defineProps(['
modelValue'])
const emit = defineEmits(['update:
modelValue'])
</script>
<template>
<input
:value="props.
modelValue"
@input="emit('update:
modelValue', $event.tar
get.value)"
/>
</template>
然后，父组件中的 v-
model="foo" 将被编译为：
Parent.vue
template
<Child
:
modelValue="foo"
@update:
modelValue="$event => (foo = $event)"
/>
如你所见，这显得冗长得多。然而，这样写有助于理解其底层机制。
因为 define
Model 声明了一个 prop，你可以通过给 define
Model 传递选项，来声明底层 prop 的选项：
js
// 使 v-
model 必填
const
model = define
Model({ required: true })
// 提供一个默认值
const
model = define
Model({ default: 0 })
WARNING
如果为 define
Model prop 设置了一个 default 值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。在下面的示例中，父组件的 myRef 是 undefined，而子组件的
model 是 1：
Child.vue
vue
<script
setup>
const
model = define
Model({ default: 1 })
</script>
Parent.vue
vue
<script
setup>
const myRef = ref()
</script>
<template>
<Child v-
model="myRef"></Child>
</template>
v-
model 的参数
组件上的 v-
model 也可以接受一个参数：
template
<MyComponent v-
model:title="bookTitle" />
在子组件中，我们可以通过将字符串作为第一个参数传递给 define
Model() 来支持相应的参数：
MyComponent.vue
vue
<script
setup>
const title = define
Model('title')
</script>
<template>
<input type="text" v-
model="title" />
</template>
在演练场中尝试一下
如果需要额外的 prop 选项，应该在
model 名称之后传递：
js
const title = define
Model('title', { required: true })
3.4 之前的用法
多个 v-
model 绑定
利用刚才在 v-
model 的参数小节中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个 v-
model 双向绑定。
组件上的每一个 v-
model 都会同步不同的 prop，而无需额外的选项：
template
<UserName
v-
model:first-name="first"
v-
model:last-name="last"
/>
vue
<script
setup>
const firstName = define
Model('firstName')
const lastName = define
Model('lastName')
</script>
<template>
<input type="text" v-
model="firstName" />
<input type="text" v-
model="lastName" />
</template>
在演练场中尝试一下
3.4 之前的用法
处理 v-
model 修饰符
在学习输入绑定
时，我们知道了 v-
model 有一些内置的修饰符，例如 .trim，.number 和 .lazy。在某些场景下，你可能想要一个自
定义组件的 v-
model 支持自
定义的修饰符。
我们来创建一个自
定义的修饰符 capitalize，它会自动将 v-
model 绑定输入的字符串值第一个字母转为
大写：
template
<MyComponent v-
model.capitalize="myText" />
通过像这样解构 define
Model() 的返回值，可以在子组件中访问添加到组件 v-
model 的修饰符：
vue
<script
setup>
const [
model, modifiers] = define
Model()
console.log(modifiers) // { capitalize: true }
</script>
<template>
<input type="text" v-
model="
model" />
</template>
为了能够基于修饰符选择性地调节值的读取和写入方式，我们可以给 define
Model() 传入
get 和
set 这两个选项。这两个选项在从模型引用中读取或设置值
时会接收到当前的值，并且它们都应该返回一个经过
处理的新值。下面是一个例子，展示了如何利用
set 选项来应用 capitalize (首字母
大写) 修饰符：
vue
<script
setup>
const [
model, modifiers] = define
Model({
set(value) {
if (modifiers.capitalize) {
return value.charAt(0).toUpperCase() + value.slice(1)
}
return value
}
})
</script>
<template>
<input type="text" v-
model="
model" />
</template>
在演练场中尝试一下
3.4 之前的用法
带参数的 v-
model 修饰符
这里是另一个例子，展示了如何在使用多个不同参数的 v-
model 时使用修饰符：
template
<UserName
v-
model:first-name.capitalize="first"
v-
model:last-name.uppercase="last"
/>
vue
<script
setup>
const [firstName, firstNameModifiers] = define
Model('firstName')
const [lastName, lastNameModifiers] = define
Model('lastName')
console.log(firstNameModifiers) // { capitalize: true }
console.log(lastNameModifiers) // { uppercase: true }
</script>
根据以上内容做一份学习笔记，要详细，内容要丰富。要做总结，最好绘制图表方便学习
本文探讨了Java中字段名大小写敏感导致的问题。具体案例是在gecBorrow.java类中的rAllocKey字段与gecBorrowVO类中的rAllocKey变量不匹配的原因，即由于首字母大写导致JDK无法正确识别。
扫一扫
3935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
