vue3的v-model指令

1. 普通input输入框双向绑定

<template><!-- 1. 普通input输入框双向绑定 --><!-- 其实等价于：<input :value="title" @update:modelValue="newTitle=>title=newTitle"/> --><input type="text" v-model="title" /><span>{{ title }}</span></template><script lang="ts" setup>import { ref,reactive } from 'vue'const title = ref("11")</script><style lang="scss"></style>

2. 自定义组件双向绑定

Test.vue

<template><!-- 2. 自定义组件双向绑定 -->父组件中: {{ weather }}<br/>子组件中: <CustomInput v-model="weather"/><!-- 等价于下面 --><!-- 1. 将值 绑定到 modelValue prop --><!-- 2. 当 update:modelValue事件 触发时，通过子组件传入的参数，更新父组件中的值 --><!-- <CustomInput :modelValue="weather" @update:modelValue="newWeather=>weather=newWeather"/> --></template><script lang="ts" setup>import { ref,reactive } from 'vue'import CustomInput from '@/views/test/CustomInput.vue'const weather = ref('rainy')
</script><style lang="scss"></style>

CustomInput

<template>{{ modelValue }}<button :class="{sunny:modelValue === 'sunny'}" @click="$emit('update:modelValue','sunny')">晴天-sunny</button><button :class="{sunny:modelValue === 'rainy'}" @click="$emit('update:modelValue','rainy')">雨天-sunny</button>
</template><script lang="ts" setup>const props = defineProps(['modelValue'])const emits = defineEmits(['update:modelValue'])</script><style lang="scss">.sunny {background: yellow;}.rainy {background: darkgray;}
</style>

3. 使用computed属性实现v-model双向绑定

Test.vue

<template><!-- 3. 使用computed属性实现v-model双向绑定 -->父组件中: {{ value1 }}<br/>子组件中: <custom-input2 v-model="value1"/></template><script lang="ts" setup>import { ref,reactive } from 'vue'import CustomInput2 from '@/views/test/CustomInput2.vue'const value1 = ref("zzhua")</script><style lang="scss"></style>

CustomInput2.vue

<template><!-- <input v-model="value" /> --> <!-- 以上等价于下方 --><input :value="value" @input="value = $event.target.value"/> {{ modelValue }} - {{ value }}<!-- 过程分析: 1. 父组件通过v-model指令, 将值通过props的方式传递给了子组件定义的modelValue2. 子组件中使用计算属性value, 读此属性返回modelValue, 修改此属性将触发 update:modelValue事件3. 当子组件初始化时, 模板被渲染, 拿到父组件传过来的modelValue, 模板中用到计算属性value的地方，计算属性value的get将被触发,于是返回modeValue的值4. 当修改子组件input框中的内容时, 将会把修改后的内容赋值给计算属性value, 计算属性value的set将会触发，将会把修改后的内容交给父组件的update:modelValue事件处理函数,从而子组件又开始更新渲染模板，于是跟第三步是一样的-->
</template><script lang="ts" setup>
import { computed } from 'vue'const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])const value = computed({get() {return props.modelValue},set(value) {emit('update:modelValue', value)}
})
</script>

4. 自定义v-model对应的prop参数名

Test.vue

<template><!-- 4. v-model:attr 自定义v-model对应的prop参数名 --><!-- 默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。我们可以通过给 v-model 指定一个参数来更改这些名字 （除此之外: 可以通过v-model:attr绑定多个v-model）--><CustomInput3 v-model:title="bookTitle" /></template><script lang="ts" setup>import { ref,reactive } from 'vue'import CustomInput3 from '@/views/test/CustomInput3.vue';const bookTitle = ref("bookTitle")</script><style lang="scss"></style>

CustomInput3

<template><input type="text" :value="title" @input="$emit('update:title', $event.target.value)" />{{ title }}
</template><script setup>defineProps(['title'])defineEmits(['update:title'])
</script>

5. v-model支持修饰符

Test.vue

<template><!-- 5. v-model的修饰符 --><MyComponent v-model.capitalize="myText" /></template><script lang="ts" setup>import { ref,reactive } from 'vue'import MyComponent from '@/views/test/MyComponent.vue';const myText = ref("myText")</script><style lang="scss"></style>

MyComponent.vue

<template><inputtype="text":value="modelValue"@input="handleInput"/>{{ modelValue }}
</template><script lang="ts" setup>const props = defineProps({modelValue: String,modelModifiers: { default: () => ({}) } /* 这个prop可以拿到修饰符 */})console.log(props.modelModifiers) // { capitalize: true }const emit = defineEmits(['update:modelValue'])// 处理input事件function handleInput(e) {let value = e.target.value// 根据是否存在修饰符, 作进一步处理if(props.modelModifiers.capitalize) {value = value.charAt(0).toUpperCase() + value.slice(1)}emit('update:modelValue', value)}</script><style lang="scss"></style>