vue3的深入组件-组件 v-model

组件 v-model

基本用法​

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

从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏：

<script setup>
const model = defineModel()function update() {model.value++
}
</script><template><div>Parent bound v-model is: {{ model }}</div><button @click="update">Increment</button>
</template>

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

<script setup lang="ts">
import { useAppStore } from '@/store/modules/app'
const appStore =  useAppStore()
import modelChild from './components/test/modelChild.vue'
const textColor = computed(() => appStore.getTextColor)
appStore.initTheme()
const countModel = ref(10)
</script><template><ConfigGlobal><p :style="{'color':textColor}"  >p标签</p>{{ countModel }}<modelChild v-model="countModel"></modelChild></ConfigGlobal></template>

显示如下：

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

• 它的 .value 和父组件的 v-model 的值同步；
• 当它被子组件变更了，会触发父组件绑定的值一起更新。
  这意味着你也可以用 v-model 把这个 ref 绑定到一个原生 input 元素上，在提供相同的 v-model 用法的同时轻松包装原生 input 元素：

child.vue<script setup>
const model = defineModel()
</script><template><span>My input</span> <input v-model="model">
</template>

// app.vue
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'const msg = ref('Hello World!')
</script><template><h1>{{ msg }}</h1><Child v-model="msg" />
</template>

底层机制

defineModel 是一个便利宏。编译器将其展开为以下内容：

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

<!-- Child.vue -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script><template><input:value="modelValue"@input="emit('update:modelValue', $event.target.value)"/>
</template><!-- Parent.vue -->
<template><ConfigGlobal><p :style="{'color':textColor}"  >p标签</p>{{ foo }}<modelChild :modelValue="foo"@update:modelValue="$event => (foo = $event)"></modelChild></ConfigGlobal></template>

因为 defineModel 声明了一个 prop，你可以通过给 defineModel 传递选项，来声明底层 prop 的选项：
子组件

<script setup>
const model = defineModel({required:true, default: 1 }) // 对应 model 参数
</script><template><input v-model="model" type="text"><!-- <input v-model="age" type="number"> -->
</template>

父组件

<script setup lang="ts">
const countModel = ref()
console.log(countModel.value,'countModel'); // undefined
</script>
<template><ConfigGlobal>{{ countModel }}<modelChild v-model="countModel"></modelChild></ConfigGlobal></template>

如果为 defineModel prop 设置了一个 default 值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。在下面的示例中，父组件的 countModel 是 undefined，而子组件的 model 是 1：

v-model 的参数

//子组件
<script setup>
const title = defineModel('title')
</script><template><input type="text" v-model="title" />
</template>// 父组件
<script setup>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'const bookTitle = ref('v-model argument example')
</script><template><h1>{{ bookTitle }}</h1><MyComponent v-model:title="bookTitle" />
</template>

不同属性绑定多个 v-model

父组件​

<UserForm v-model:username="user.name"v-model:age="user.age"
/>

子组件

<script setup>
const username = defineModel('username') // 对应 username 参数
const age = defineModel('age') // 对应 age 参数
</script><template><input v-model="username" type="text"><input v-model="age" type="number">
</template>

处理 v-model 修饰符

父组件
使用内置修饰符（如 .trim）：

<Child v-model.trim="text" />

子组件

<script setup>
const [model, modifiers] = defineModel() // 解构出修饰符// 根据修饰符调整值
const processedModel = computed({get: () => model.value,set: (value) => {if (modifiers.trim) {model.value = value.trim()} else {model.value = value}}
})
</script><template><input v-model="processedModel" />
</template>

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

父组件

<Child v-model.capitalize="text" />

子组件​​
通过 set 选项处理修饰符逻辑

<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 修饰符

父组件

<UserForm v-model:username.trim="user.name"v-model:age.number="user.age"
/>

子组件​​
分别处理每个参数的修饰符：

<script setup>
const [username, usernameModifiers] = defineModel('username')
const [age, ageModifiers] = defineModel('age')// 处理 username 的 trim 修饰符
const processedUsername = computed({get: () => username.value,set: (val) => {username.value = usernameModifiers.trim ? val.trim() : val}
})// 处理 age 的 number 修饰符
const processedAge = computed({get: () => age.value,set: (val) => {age.value = ageModifiers.number ? Number(val) : val}
})
</script><template><input v-model="processedUsername" /><input v-model="processedAge" type="number" />
</template>