v-model 的参数
默认情况下,组件上的
v-model
使用modelValue
作为prop
和update:modelValue
作为事件。
<!-- 子组件 child-component.vue-->
<template>
<div>
<input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</div>
</template>
<script>
export default {
props: {
modelValue: {
type: String,
default: '',
}
},
}
</script>
父组件使用子组件: <child-component
v-model
=“xxx”></child-component>
我们可以通过向 v-model 传递参数来修改这些名称(如title):
<!-- 子组件 child-component.vue-->
<template>
<div>
<input type="text" :value="title" @input="$emit('update:title', $event.target.value)">
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: '',
}
},
}
</script>
此时父组件使用子组件: <child-component
v-model:title
=“xxx”></child-component>
多个 v-model 绑定
<!-- 子组件 my-input.vue -->
<template>
<div>
<div>姓名:<input type="text" :value="firstValue" @input="$emit('update:firstValue', $event.target.value)"></div>
<div>笔名:<input type="text" :value="secondValue" @input="handleInput"></div>
</div>
</template>
<script>
export default {
props: {
firstValue: {
type: String,
default: '',
},
secondValue: {
type: String,
default: '',
}
},
setup(props, context) {
const handleInput = e => {
context.emit('update:secondValue', e.target.value)
}
return { handleInput }
}
}
</script>
<!-- 父组件 -->
<template>
<div>
<!--第一种写法-->
<my-input v-model:firstValue="value1" v-model:secondValue="value2"></my-input>
<!--第二种写法-->
<my-input :firstValue="value1" @update:firstValue="value1=$event" :secondValue="value2" @update:secondValue="value2=$event "></my-input>
</div>
</template>
<script>
import MyInput from '@/components/my-input'
import { ref } from 'vue'
export default {
components: {
MyInput
},
setup() {
const value1 = ref('vue3.0 v-model的使用')
const value2 = ref('默认值')
return {
value1,
value2
}
},
}
</script>
v-model 修饰符
v-model
的修饰符将通过modelModifiers prop
提供给组件
<!-- 子组件 my-input.vue -->
<template>
<div>
<div>输入框:<input type="text" :value="modelValue" @input="handleEmit"></div>
</div>
</template>
<script>
import { toRefs } from 'vue'
export default {
props: {
modelValue: {
type: String,
default: '',
},
modelModifiers: {
default: () => ({})
}
},
setup(props, context) {
const { modelModifiers } = toRefs(props)
const handleEmit = e => {
let value = e.target.value
// 父组件使用修饰符toUpperCase,在这里自定义操作
if (modelModifiers.value.toUpperCase) {
value = value.toUpperCase()
}
context.emit('update:modelValue', value)
}
return { handleEmit }
},
}
</script>
<!-- 父组件 -->
<template>
<div>
<my-input v-model.toUpperCase="value"></my-input>
</div>
</template>
<script>
import MyInput from '@/components/my-input'
import { ref } from 'vue'
export default {
components: {
MyInput
},
setup() {
const value = ref('vue3.0 v-model的使用')
return {
value,
}
},
}
</script>
对于带参数的
v-model
绑定,生成的prop
名称将为arg + "Modifiers"
。注意v-model
先参数,再修饰符。如例子:v-model:title.toUpperCase
<!-- 子组件 my-input.vue -->
<template>
<div>
<div>输入框:<input type="text" :value="title" @input="handleEmit"></div>
</div>
</template>
<script>
import { toRefs } from 'vue'
export default {
props: {
title: {
type: String,
default: '',
},
titleModifiers: {
default: () => ({})
}
},
setup(props, context) {
const { titleModifiers } = toRefs(props)
const handleEmit = e => {
let value = e.target.value
if (titleModifiers.value.toUpperCase) {
value = value.toUpperCase()
}
context.emit('update:title', value)
}
return { handleEmit }
},
}
</script>
父组件
<!-- 父组件 -->
<template>
<div>
<my-input v-model:title.toUpperCase="value"></my-input>
</div>
</template>
<script>
import MyInput from '@/components/my-input'
import { ref } from 'vue'
export default {
components: {
MyInput
},
setup() {
const value = ref('vue3.0 v-model的使用')
return {
value,
}
},
}
</script>