vue3中的v-model怎么使用

时间：2023-05-10 15:00

绑定单个属性

基础绑定

以自定义组件 CustomInput 举例

<script setup>    const txt = ref(''); </script>  <template>  <CustomInput v-model="txt" /> </template>

v-model 会被展开为如下的形式

<CustomInput  :modelValue="txt"  @update:modelValue="newValue => txt = newValue"/>

<CustomInput> 组件内部需要做两件事：

将内部原生 <input> 元素的 value attribute 绑定到 modelValue prop
当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件

这里是相应的代码：

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

有些人会觉得这种写法过于繁琐，会导致标签代码变得冗长

另一种在组件内实现 v-model 的方式是使用一个可写的，同时具有 getter 和 setter 的 computed 属性

computed 绑定

使用computed 属性时， get 方法需返回 modelValue prop，而 set 方法需触发相应的事件

<script setup>const value = computed({  get() {    return props.modelValue  },  set(value) {    emit("update:modelValue", value)  }})</script><template> <input v-model="value" /></template>

这种写法可以简化标签中的属性，逻辑清晰

单个属性可以使用 v-model 轻松搞定，如果多个属性都需要双向绑定呢?

v-model 绑定多个属性

默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件

但我们可以通过给 v-model 指定一个参数来更改这些名字：

<template>    <CustomInput v-model:first-name="first" v-model:last-name="last" /></template>

同样的，也可以用两种方式绑定，只是 prop 从原来的 modelValue 变为了传入的参数名,对应的事件也变成了 update:参数名

 <script setup> const props = defineProps({  firstName: String,  lastName: String,})// 在computed中 使用const emit = defineEmits(['update:firstName', 'update:lastName'])</script><template>  <input    type="text"    :value="firstName"    @input="$emit('update:firstName', $event.target.value)"  />  <input    type="text"    :value="lastName"    @input="$emit('update:lastName', $event.target.value)"  /></template>

绑定对象

在一个复杂的组件中，如果多个字段需要双向绑定，如果使用上文所示方法的话，会有一些繁琐

介绍两种双向绑定对象的做法

定义父组件 searchBar 为一个复杂表单组件

<script setup>import { ref } from "vue"const modelValue = ref({  keyword: "123",  selectValue: "",  options: [    {      label: "全部",      value: ""    },    {      label: "a1",      value: "1"    },    {      label: "a2",      value: "2"    },  ]})</script><template>    <searchBar v-model="modelValue" /></template>

那么在 searchBar 组件内，我们接收 modelValue 并定义类型为 Object

<template>  <div>    <!-- <input type="text" v-model="modelValue.keyword"> 可以实现双向绑定 -->    <input type="text"       :value="modelValue.keyword"      @input="handleKeywordChange"    >    <select v-model="modelValue.selectValue">      <option v-for="o in modelValue.options" :key="o.value" :value="o.value">        {{ o.label }}      </option>    </select>  </div></template><script lang="ts" setup>const props = defineProps({  modelValue: {    type: Object,    default: () => ({})  }})const emit = defineEmits(["update:modelValue"]);// 以 input 举例const handleKeywordChange=(val)=>{  emit("update:modelValue",{    ...props.modelValue,    keyword:val.target.value  })}</script>

如果传入对象的话，如注释所介绍的那样
<input type="text" v-model="modelValue.keyword">虽然可以直接进行双向绑定，但是这样会破坏单项数据流

和上文的 emit 触发事件一样，但是传递的数据则变成了对象

虽然使用 emit 可以触发双向绑定，但是过于繁琐，下面介绍一种更优雅的写法，可以说是一种奇技淫巧 -- computed + prxoy

如果使用 computed 绑定，你可能会写出这种代码

<template>      <input type="text" v-model="model.keyword"> </template> <script lang="ts" setup>const model = computed({  get() {    return props.modelValue  },  set(value) {    // console.log(value) // 发现没有打印     emit("update:modelValue", {      ...props.modelValue,       keyword: value     })  }})<script>

但是当你输入的时候，你会发现并没有触发 setter, 因为 computed 会做一层代理，代理对象没有发生修改

如果想要触发 setter ，如下图：

// 只有这样才会变化 model.value = {   keyword:"asdfad" }

这种方法无法触发 setter，也就无法双向绑定，该怎么办呢？

在 getter 中返回一个 代理对象！在 getter 中返回一个 代理对象！在 getter 中返回一个 代理对象！

因为 proxy代理的对象是和被代理对象属性是保持一致的，所以我们使用 proxy 包裹原对象

那么 v-model 绑定的是代理之后的对象，如果代理对象属性发生了改变，则会触发代理对象中的 set 方法，此时我们可以触发 emit

const model = computed({  get() {    return new Proxy(props.modelValue, {      set(obj, name, val) {        emit("update:modelValue", {          ...obj,          [name]: val        })        return true      }    })  },  set(value) {    emit("update:modelValue", {      ...props.modelValue,      keyword: value    })  }})

修饰符

我们知道 v-model 有一些内置的修饰符，例如 .trim，.number 和 .lazy。

在某些场景下，我们可能想要一个自定义组件的 v-model 支持自定义的修饰符。

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

  <CustomInput v-model.capitalize="txt" />

我们添加了capitalize修饰符，他会被自动传入到 prop 中的 modelModifiers 中

<script setup>const props = defineProps({  modelValue: String,  modelModifiers: {    default: () => ({})  }})const emitValue = (e) => {  let value = e.target.value;  // 使用 修饰符  if (props.modelModifiers.capitalize) {    value = value.charAt(0).toUpperCase() + value.slice(1)  }  emit('update:modelValue', value)}</script><template>  <input :value="modelValue" @input="emitValue" /></template>

以上就是vue3中的v-model怎么使用的详细内容，更多请关注Gxl网其它相关文章！