Vue.js自定義事件的表單輸入組件方法

發(fā)布時間：2020-09-07 21:18:08 來源：腳本之家閱讀：170 作者：Allin丶欄目：web開發(fā)

Vue.js使用自定義事件的表單輸入組件

自定義事件可以用來創(chuàng)建自定義的表單輸入組件，使用 v-model 來進行數(shù)據(jù)雙向綁定。要牢記：

<input v-model="something">

這不過是以下示例的語法糖：

<input
 v-bind:value="something"
 v-on:input="something = $event.target.value">

所以在組件中使用時，它相當(dāng)于下面的簡寫：

<custom-input
 v-bind:value="something"
 v-on:input="something = arguments[0]">
</custom-input>

所以要讓組件的 v-model 生效，它應(yīng)該 (從 2.2.0 起是可配置的)：

接受一個 value prop

在有新的值時觸發(fā) input 事件并將新值作為參數(shù)

我們來看一個非常簡單的貨幣輸入的自定義控件：--在父組件中引用子組件模板時用綁定v-model數(shù)據(jù)：

<currency-input v-model="price"></currency-input>

Vue.component('currency-input', {
 template: '\
  <span>\
   $\
   <input\
    ref="input"\
    v-bind:value="value"\
    v-on:input="updateValue($event.target.value)"\
   >\
  </span>\
 ',
 props: ['value'],
 methods: {
  // 不是直接更新值，而是使用此方法來對輸入值進行格式化和位數(shù)限制
  updateValue: function (value) {
   var formattedValue = value
    // 刪除兩側(cè)的空格符
    .trim()
    // 保留 2 位小數(shù)
    .slice(
     0,
     value.indexOf('.') === -1
      ? value.length
      : value.indexOf('.') + 3
    )
   // 如果值尚不合規(guī)，則手動覆蓋為合規(guī)的值
   if (formattedValue !== value) {
    this.$refs.input.value = formattedValue
   }
   // 通過 input 事件帶出數(shù)值
   this.$emit('input', Number(formattedValue))
  }
 }
})

自定義組件的 v-model

2.2.0 新增

默認情況下，一個組件的 v-model 會使用 value prop 和 input 事件。但是諸如單選框、復(fù)選框之類的輸入類型可能把 value 用作了別的目的。model 選項可以避免這樣的沖突：

Vue.component('my-checkbox', {
 model: {
  prop: 'checked',
  event: 'change'
 },
 props: {
  checked: Boolean,
  // 這樣就允許拿 `value` 這個 prop 做其它事了
  value: String
 },
 // ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

上述代碼等價于：

<my-checkbox
 :checked="foo"
 @change="val => { foo = val }"
 value="some value">
</my-checkbox>

注意你仍然需要顯式聲明 checked 這個 prop。

以上這篇Vue.js自定義事件的表單輸入組件方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細節(jié)

Vue.js自定義事件的表單輸入組件方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽