這次帶給大家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。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是Vue.js自訂事件如何進行表單輸入元件的詳細內容。更多資訊請關注PHP中文網其他相關文章!