vue3中v-model的用法詳解

更新時(shí)間：2023年04月24日 11:33:14 作者：好大貓

vue 提供了很多自定義指令，大大方便了我們的開發(fā)，其中最常用的也就是 v-model，他可以在組件上使用以實(shí)現(xiàn)雙向綁定。它可以綁定多種數(shù)據(jù)結(jié)構(gòu), 今天總結(jié)一下用法

綁定單個(gè)屬性

基礎(chǔ)綁定

以自定義組件 CustomInput 舉例

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

v-model 會(huì)被展開為如下的形式

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

<CustomInput> 組件內(nèi)部需要做兩件事：

將內(nèi)部原生 <input> 元素的 value attribute 綁定到 modelValue prop
當(dāng)原生的 input 事件觸發(fā)時(shí)，觸發(fā)一個(gè)攜帶了新值的 update:modelValue 自定義事件

這里是相應(yīng)的代碼：

<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>

有些人會(huì)覺得這種寫法過于繁瑣，會(huì)導(dǎo)致標(biāo)簽代碼變得冗長

另一種在組件內(nèi)實(shí)現(xiàn) v-model 的方式是使用一個(gè)可寫的，同時(shí)具有 getter 和 setter 的 computed 屬性

computed 綁定

使用computed 屬性時(shí)， get 方法需返回 modelValue prop，而 set 方法需觸發(fā)相應(yīng)的事件

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

<template>
 <input v-model="value" />
</template>

這種寫法可以簡化標(biāo)簽中的屬性，邏輯清晰

單個(gè)屬性可以使用 v-model 輕松搞定，如果多個(gè)屬性都需要雙向綁定呢?

?? v-model 綁定多個(gè)屬性

默認(rèn)情況下，v-model 在組件上都是使用 modelValue 作為 prop，并以 update:modelValue 作為對應(yīng)的事件

但我們可以通過給 v-model 指定一個(gè)參數(shù)來更改這些名字：

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

同樣的，也可以用兩種方式綁定，只是 prop 從原來的 modelValue 變?yōu)榱藗魅氲膮?shù)名,對應(yīng)的事件也變成了 update:參數(shù)名

 <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>

?? 綁定對象

在一個(gè)復(fù)雜的組件中，如果多個(gè)字段需要雙向綁定，如果使用上文所示方法的話，會(huì)有一些繁瑣

介紹兩種雙向綁定對象的做法

定義父組件 searchBar 為一個(gè)復(fù)雜表單組件

<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 組件內(nèi)，我們接收 modelValue 并定義類型為 Object

<template>
  <div>
    <!-- <input type="text" v-model="modelValue.keyword"> 可以實(shí)現(xiàn)雙向綁定 -->
    <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">雖然可以直接進(jìn)行雙向綁定，但是這樣會(huì)破壞單項(xiàng)數(shù)據(jù)流

和上文的 emit 觸發(fā)事件一樣，但是傳遞的數(shù)據(jù)則變成了對象

雖然使用 emit 可以觸發(fā)雙向綁定，但是過于繁瑣，下面介紹一種更優(yōu)雅的寫法，可以說是一種奇技淫巧 -- computed + prxoy

如果使用 computed 綁定，你可能會(huì)寫出這種代碼

<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) // 發(fā)現(xiàn)沒有打印
     emit("update:modelValue", {
      ...props.modelValue,
       keyword: value
     })
  }
})
<script>

但是當(dāng)你輸入的時(shí)候，你會(huì)發(fā)現(xiàn)并沒有觸發(fā) setter, 因?yàn)?nbsp;computed 會(huì)做一層代理，代理對象沒有發(fā)生修改

如果想要觸發(fā) setter ，如下圖：

// 只有這樣才會(huì)變化
 model.value = {
   keyword:"asdfad"
 }

這種方法無法觸發(fā) setter，也就無法雙向綁定，該怎么辦呢？

在 getter 中返回一個(gè) 代理對象！在 getter 中返回一個(gè) 代理對象！在 getter 中返回一個(gè) 代理對象！

因?yàn)?proxy代理的對象是和被代理對象屬性是保持一致的，所以我們使用 proxy 包裹原對象

那么 v-model 綁定的是代理之后的對象，如果代理對象屬性發(fā)生了改變，則會(huì)觸發(fā)代理對象中的 set 方法，此時(shí)我們可以觸發(fā) 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 有一些內(nèi)置的修飾符，例如 .trim，.number 和 .lazy。

在某些場景下，我們可能想要一個(gè)自定義組件的 v-model 支持自定義的修飾符。

我們來創(chuàng)建一個(gè)自定義的修飾符 capitalize，它會(huì)自動(dòng)將 v-model 綁定輸入的字符串值第一個(gè)字母轉(zhuǎn)為大寫：

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

我們添加了capitalize修飾符，他會(huì)被自動(dòng)傳入到 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>