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
来源: http://www.jb51.net/article/136087.htm