vue 使用自定义事件的表单输入组件

一个官方文档的例子~

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

这里的v-model相当于：①v-bind:value="price"(这个value是指props['value']，可以任意定义)  ② @input="price=arguments[0]"

Vue.component('currency-input', { template: '\ <span>\ $\ <input\ ref="input"\ v-bind:value="value"\ //这里的第一个value是指<input>的value不能改变，另一个是props['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)) } } })

父组件用prop给子组件传递数据。

子组件通过触发事件带出数据。