Vue.js自訂事件的表單輸入組件方法，vue.js表單

Vue.js自訂事件的表單輸入組件方法，vue.js表單

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

自訂事件可以用來建立自訂的表單輸入組件，使用 v-model 來進行資料雙向繫結。要牢記：

<input v-model="something">

這不過是以下樣本的文法糖：

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

所以在組件中使用時，它相當於下面的簡寫：

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

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

接受一個 value prop

在有新的值時觸發 input 事件並將新值作為參數

我們來看一個非常簡單的貨幣輸入的自訂控制項：--在父組件中引用子組件模板時用綁定v-model資料：

<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: {  // 不是直接更新值，而是使用此方法來對輸入值進行格式化和位元限制  updateValue: function (value) {   var formattedValue = value    // 刪除兩側的空格符    .trim()    // 保留 2 位小數    .slice(     0,     value.indexOf('.') === -1      ? value.length      : value.indexOf('.') + 3    )   // 如果值尚不合規，則手動覆蓋為合規的值   if (formattedValue !== value) {    this.$refs.input.value = formattedValue   }   // 通過 input 事件帶出數值   this.$emit('input', Number(formattedValue))  } }})

自訂群組件的 v-model

2.2.0 新增

預設情況下，一個組件的 v-model 會使用 value prop 和 input 事件。但是諸如單選框、複選框之類的輸入類型可能把 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自訂事件的表單輸入組件方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。