快捷導(dǎo)航

Vue 自定義組件 v-model 使用詳解

更新時間：2022年08月31日 16:13:49 作者：前端無名打工人

這篇文章主要介紹了Vue 自定義組件 v-model 使用介紹,包括vue2中使用和vue3中使用，本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

Vue2中使用

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

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)在在這個組件上使用 v-model 的時候：

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

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

注意你仍然需要在組件的 props 選項里聲明 checked 這個 prop。

Vue3中使用

v-model 使用 modelValue

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

<input v-model="searchText" />

上面的代碼其實等價于下面這段 (編譯器會對 v-model 進行展開)：

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

而當使用在一個組件上時，v-model 會被展開為如下的形式：

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

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

將內(nèi)部原生 input 元素的 value attribute 綁定到 modelValue prop
輸入新的值時在 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 也可以在這個組件上正常工作了：

<CustomInput v-model="searchText" />

另一種在組件內(nèi)實現(xiàn) v-model 的方式是使用一個可寫的，同時具有 getter 和 setter 的計算屬性。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ù)

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

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

在這個例子中，子組件應(yīng)聲明一個 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>

多個 v-model 綁定

利用剛才在 v-model 參數(shù)小節(jié)中學(xué)到的技巧，我們可以在一個組件上創(chuàng)建多個 v-model 雙向綁定，每一個 v-model 都會同步不同的 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í)輸入綁定時，我們知道了 v-model 有一些內(nèi)置的修飾符，例如 .trim，.number 和 .lazy。在某些場景下，你可能想要一個自定義組件的 v-model 支持自定義的修飾符。

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

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

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

<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，因為它在模板中的 v-model 綁定上被使用了。

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

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

對于又有參數(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 }
  }
}

到此這篇關(guān)于Vue 自定義組件 v-model 使用介紹的文章就介紹到這了,更多相關(guān)Vue 自定義組件 v-model內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: