快捷導(dǎo)航

Vue自定義組件中v-model的使用方法示例

更新時(shí)間：2023年05月09日 09:54:35 作者：寒小韓_

日常開發(fā)中除了直接在input標(biāo)簽上使用v-model指令外,封裝的組件也需要v-model,下面這篇文章主要給大家介紹了關(guān)于Vue自定義組件中v-model使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

Vue2中使用

2.2.0+ 新增

一個(gè)組件上的 v-model 默認(rèn)會(huì)利用名為 value 的 prop 和名為 input 的事件，但是像單選框、復(fù)選框等類型的輸入控件可能會(huì)將 value attribute 用于不同的目的。model 選項(xiàng)可以用來避免這樣的沖突：

Vue.component('base-checkbox', {
model: {
  prop: 'checked',
  event: 'change'
},
props: {
	checked: Boolean
},
template: <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" >
})

現(xiàn)在在這個(gè)組件上使用 v-model 的時(shí)候：

<base-checkbox v-model="lovingVue"></base-checkbox>

這里的 lovingVue 的值將會(huì)傳入這個(gè)名為 checked 的 prop。同時(shí)當(dāng) 觸發(fā)一個(gè) change 事件并附帶一個(gè)新的值的時(shí)候，這個(gè) lovingVue 的 property 將會(huì)被更新。

注意你仍然需要在組件的 props 選項(xiàng)里聲明 checked 這個(gè) prop。

Vue3中使用

v-model 使用 modelValue

自定義事件可以用于開發(fā)支持 v-model 的自定義表單組件?；貞浺幌?v-model 在原生元素上的用法：

<input v-model="searchText" />

上面的代碼其實(shí)等價(jià)于下面這段 (編譯器會(huì)對(duì) v-model 進(jìn)行展開)：

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

而當(dāng)使用在一個(gè)組件上時(shí)，v-model 會(huì)被展開為如下的形式：

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

要讓這個(gè)例子實(shí)際工作起來，組件內(nèi)部需要做兩件事：

將內(nèi)部原生 input 元素的 value attribute 綁定到 modelValue prop
輸入新的值時(shí)在 input 元素上觸發(fā) update:modelValue 事件

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

<!-- CustomInput.vue -->
<script>
  export default {
    props: ['modelValue'],
    emits: ['update:modelValue']
  }
</script>
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
    />
  </template>

現(xiàn)在 v-model 也可以在這個(gè)組件上正常工作了：

<CustomInput v-model="searchText" />

另一種在組件內(nèi)實(shí)現(xiàn) v-model 的方式是使用一個(gè)可寫的，同時(shí)具有 getter 和 setter 的計(jì)算屬性。get 方法需返回 modelValue prop，而 set 方法需觸發(fā)相應(yīng)的事件：

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

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

自定義 v-model 的使用的參數(shù)

默認(rèn)情況下，v-model 在組件上都是使用 modelValue 作為 prop，并以 update:modelValue 作為對(duì)應(yīng)的事件。我們可以通過給 v-model 指定一個(gè)參數(shù)來更改這些名字：

<MyComponent v-model:title="bookTitle" />

在這個(gè)例子中，子組件應(yīng)聲明一個(gè) title prop，并通過觸發(fā) update:title 事件更新父組件值：

<!-- MyComponent.vue -->
<script>
export default {
  props: ['title'],
  emits: ['update:title']
}
</script>
<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>

多個(gè) v-model 綁定

利用剛才在 v-model 參數(shù)小節(jié)中學(xué)到的技巧，我們可以在一個(gè)組件上創(chuàng)建多個(gè) v-model 雙向綁定，每一個(gè) v-model 都會(huì)同步不同的 prop：

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>
<script>
export default {
  props: {
    firstName: String,
    lastName: String
  },
  emits: ['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>

自定義v-model 的修飾符

在學(xué)習(xí)輸入綁定時(shí)，我們知道了 v-model 有一些內(nèi)置的修飾符，例如 .trim，.number 和 .lazy。在某些場(chǎng)景下，你可能想要一個(gè)自定義組件的 v-model 支持自定義的修飾符。

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

<MyComponent v-model.capitalize="myText" />

組件的 v-model 上所添加的修飾符，可以通過 modelModifiers prop 在組件內(nèi)訪問到。在下面的組件中，我們聲明了 modelModifiers 這個(gè) prop，它的默認(rèn)值是一個(gè)空對(duì)象：

<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
}
</script>
<template>
  <input
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

注意這里組件的 modelModifiers prop 包含了 capitalize 且其值為 true，因?yàn)樗谀０逯械?v-model 綁定上被使用了。

有了 modelModifiers 這個(gè) prop，我們就可以在原生事件偵聽函數(shù)中檢查它的值，然后決定觸發(fā)的自定義事件中要向父組件傳遞什么值。在下面的代碼里，我們就是在每次元素觸發(fā) input 事件時(shí)將值的首字母大寫：

<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  }
}
</script>
<template>
  <input type="text" :value="modelValue" @input="emitValue" />
</template>

對(duì)于又有參數(shù)又有修飾符的 v-model 綁定，生成的 prop 名將是 arg + “Modifiers”。舉例來說：

<MyComponent v-model:title.capitalize="myText">

相應(yīng)的聲明應(yīng)該是：

export default {
  props: ['title', 'titleModifiers'],
  emits: ['update:title'],
  created() {
    console.log(this.titleModifiers) // { capitalize: true }
  }
}